scheduler complex questions

javitxin25 · April 17, 2015, 9:26am

Hi, i need to customize some things of the scheduler component. Exactly, about recursive events.

i will try to explain all of them.

Add a header, a footer and some new fields on that set of forms that allow the user to configure a recursive event.
Add more than one recursive event to the same event on a dynamic way. The user will be able to add more schedule lines to an event. Imagine an event has some diferent schedulers. I want to have the same header and asociate different scheduler lines to that event header… so… the user does not have to rewrite the header all the time.

I have thought to customize the event detail form (scheduler.config.form) and now it is a segmented view with some tabs…and one of those is composed of scheduler lines. In that tab, the user will add lines to the event.

I worked with an old scheduler web component (dhtmlx scheduler) and i think this component works in the same way so… i will be able to add some fields in my database to asociated different recursive events to a main one.

The problem is on this set of forms that i have to customize…so i think i need the source code to customize that rec_type type field…

If you need more explanation, please tell me…

Thanks and regards!

Maria · April 17, 2015, 10:45am

Hi,

the issue, that you described, is far beyond from built-in Scheduler functionality. And unfortunately, there is not a public solution for your task. Scheduler does not allow to handle events as you described (events and their sub-events).

so i think i need the source code to customize that rec_type type field…

Scheduler package contains “debug” library (source code). You may learn it and redefine some methods if its needed.

Possibly, you will need to redefine the getEvents(startDate, endDate) method that returns events for Scheduler and use own solution for recurring event handling.

I worked with an old scheduler web component (dhtmlx scheduler) and i think this component works in the same way so…

If you managed to implement the described functionality with dhtmlx scheduler, you can easily migrate it to Webix Scheduler.

javitxin25 · April 17, 2015, 1:15pm

Thanks for tour response Maria,

If the database model and the logic is the same than dhtmlx scheduler i am sure my case of use can be done…

The problem is the presentación or interface…so…can you provide me the js code that implements those forma that compose a red_typetype as the one that apears at the event form?

Thanks and regards

Maria · April 17, 2015, 1:29pm

Please find information about rec_type format here:

http://docs.webix.com/mobile_calendar__recurring_events.html#formatdetails

The existent implementation of this format can be found in scheduler source code.

javitxin25 · April 17, 2015, 3:46pm

Thanks Maria, i will have a look at the source code.
The link you provide me does not refered to the customization i need…i hope the source code could help me because i want to change those forms that a rec_type field manages…any more help would be apreciated.

I know it is a difficult issue, but it is important for my proyect… I need to customize that group of forms…

Thanks and regards!

javitxin25 · April 17, 2015, 4:17pm

I am sorry if my explanation is not very good…what i am trying to customize is that group of forms that are visible when the user is configuring a recurring event. I need to add some fields.i do not want to touch anything in those forms…and their logic…just adding some fields asociated with that scheduler, maybe add a foot AMD a header too…

So i need, if posible, the template to custimize and its js codecode

Thanks and regards

Maria · April 20, 2015, 9:56am

Hello,

I posted a solution for complex form and custom fields:
http://forum.webix.com/discussion/4241/scheduler-event-form-customize#latest. This form contains custom text field - “location”. Form fields must contain “name” property if you want to set/get value for this field. You can add any other form control into the form.

But Scheduler does not contain built-in solution for “one recursive event to the same event on a dynamic way”. And its implementation won’t be easy. You can contact our sales team ( sales@webix.com ) about this solution if it is needed.

javitxin25 · April 20, 2015, 12:21pm

Thanks Maria, that solution was great for a event form costumization… and i used it but…if i am not wrong and the logic and database is the same than the dhtmlx scheduler my case of use can be done…

let me explain to you please…

about database and logic…

there is some fields thare a not posible to update or customize like start date, end date, details, rec_type, and some other ones…ok…until now, perfect…

I know i can add some other fields…for example and id that can asociate 2 or more events…

so, i can do some recursive events asociated that can simulate some schedulers for the same event…

resuming: my case of use that the user can add some schedulers to an event is possible.

Interface or screens…using webix:

There is a template called “scheduler.config.form” where i can customize an event form…and this is the one you told me and it is perfect but…this is not the one i need for recurring events…

If i click on a repeat field ( { view: “text”, id: ‘rec_type’, name: ‘rec_type’} )

there are some forms needed to configure a recirring event…

and these are the forms i need to customize… i need to add some new fields and a footer and a header…

So resuming all and if i am not wrong, asuming that the logic and database is ready for my case of use, i just need to add some fields to that set od forms that configures a recursive event…

Please, tell me if i am right…

thanks and regards!

Maria · April 22, 2015, 9:48am

Hello,

We did not add configuration for all forms of recurring events in Scheduler docs. But you can find these configurations in source file. For example:

scheduler.config.rec_init_form - form that is shown on “repeat event” click
scheduler.config.daily_form - form for “daily” repeating
…

And scheduler.config.recurring_views - a collection (an array) of all recurring views.

javitxin25 · May 5, 2015, 4:49pm

Hi again,

at the end i have been able to customize the recurrent views as i wanted so…thanks…

but i have more questions about this…

how do i get the recurring mask when the user clicks on “done” button? (when the user ends his recurring event configuration)

Once the user clicks there, i have to be able to read that mask and turn it into a text that defines that mask… (understoodable for the user. for example: ‘every first monday of june’. Or whatever…). And this should be in spanish…

i know it could be difficult but… i need this.

Thanks and regards!

javitxin25 · May 5, 2015, 4:51pm

i need both, the mask and the understoodable text defining his configuration…

the mask to insert into my database and the understoodable text to show the output in the view

Thanks and regards!

Maria · May 5, 2015, 5:06pm

Hi,

You can use the following to listen to ‘done’ button click:

$$("scheduler").$$("recDone").attachEvent("onItemClick",function(){
       webix.delay(function(){
	   var type = $$("scheduler").$$("rec_type").getValue();
           // your code
      });
});

And here is description for recurring mask:

http://docs.webix.com/mobile_calendar__recurring_events.html

javitxin25 · May 5, 2015, 5:59pm

Thank you very much…

javitxin25 · May 7, 2015, 4:39pm

i am trying to get that rec_type value but no luck…

this is the edit form i have…it is not easy to get that value jeje

 scheduler.config.form = [
            {
                view: "segmented", id: "pages", options:
                [
                    { id: "formCabecera", value: "<img src='resources/Android/drawable-ldpi/etiqueta_verde.png' />" },
                    { id: "formImagenes", value: "<img src='resources/Android/drawable-ldpi/media_verde.png' />" },
                    { id: "formUbicacion", value: "<img src='resources/Android/drawable-ldpi/ubicacion.png' />" },
                    { id: "formPases", value: "<img src='resources/Android/drawable-ldpi/pases_verde.png' />" },
                    { id: "formPatrocinadores", value: "<img src='resources/Android/drawable-ldpi/etiqueta_verde.png' />" },
                    { id: "formColaboradores", value: "<img src='resources/Android/drawable-ldpi/etiqueta_verde.png' />" },
                    { id: "formInscripciones", value: "<img src='resources/Android/drawable-ldpi/etiqueta_verde.png' />" },

                ]
           },
           {
                id: "formPages",
                cells:
                [
                    {
                        type: "clean",
                        view: "eventlayout",
                        id: "formCabecera",
                        rows:
                            [
                                { view: "text", label: scheduler.locale.labels.label_event, labelWidth: 90, id: "text", name: 'text' },
                                { view: "datetext", label: scheduler.locale.labels.label_start, labelWidth: 90, id: 'start_date', name: 'start_date', dateFormat: scheduler.config.form_date },
                                { view: "datetext", label: scheduler.locale.labels.label_end, labelWidth: 90, id: 'end_date', name: 'end_date', dateFormat: scheduler.config.form_date },
                                { view: "checkbox", id: 'allDay', name: 'allDay', label: scheduler.locale.labels.label_allday, labelWidth: 100, value: 0 },


                        //custom section in form
                                {view: "text", label: "Location", id: 'location', name: "location", labelWidth: 90 }
                            ]
                    },
                    {
                        type: "clean",
                        view: "eventlayout",
                        id: "formImagenes",
                        rows:
                            [
                                { view: "text", label: "Location", id: 'location', name: "Imágenes", labelWidth: 90 }
                            ]
                    },
                    {
                        type: "clean",
                        view: "eventlayout",
                        id: "formUbicacion",
                        rows:
                            [
                                { view: "text", label: "Location", id: 'location', name: "Ubicación", labelWidth: 90 }
                            ]

                    },
                    {
//                        type: "clean",
//                        view: "eventlayout",
                        id: "formPases",
                        rows:
                            [
                                { view: "rectext", id: 'rec_type', name: 'rec_type', label: "<span style='color:green; margin.left:5px;'>Nuevo horario</span>" }
                            ]

                    },
                    {
                        type: "clean",
                        view: "eventlayout",
                        id: "formPatrocinadores",
                        rows:
                            [
                                { view: "text", label: "Location", id: 'location', name: "Patrocinadores", labelWidth: 90 }
                            ]

                    },
                    {
                        type: "clean",
                        view: "eventlayout",
                        id: "formColaboradores",
                        rows:
                            [
                                { view: "text", label: "Location", id: 'location', name: "Colaboradores", labelWidth: 90 }
                            ]

                    },
                    {
                        type: "clean",
                        view: "eventlayout",
                        id: "formInscripciones",
                        rows:
                            [
                                { view: "text", label: "Location", id: 'location', name: "Inscripciones", labelWidth: 90 }
                            ]
                    }
                ]
           }
    ];

I tried it for a long time but…

i tried this:

 $$("scheduler").$$("recDone").attachEvent("onItemClick", function () {
            var _form = $$("scheduler").$$("formPages").q[3].q[0]
            var _formPages = $$("scheduler").$$("formPages").q[3].q[0].data
            var _formPages2 = $$("scheduler").$$("formPages").q[3].q[0].data.value;
            debugger;
           


            webix.delay(function () {
                var type = $$("scheduler").$$("rec_type").getValue();
                alert(type)
                // your code
            });
        });

but the value is always empty…

please help me…

if you need something about the proyect ask to me please!

thanks and regards…

Maria · May 8, 2015, 2:11pm

Hi,

You missed ‘event_length’ field in your form configuration. This field is necessary for recurring events calculation:

...
 { view: "rectext", id: 'rec_type', name: 'rec_type', label: "<span style='color:green; margin.left:5px;'>Nuevo horario</span>" },
 {view:"text",	hidden: true, id:'event_length', name:'event_length'} 
...

javitxin25 · May 11, 2015, 5:25pm

thanks maria. It worked.

is there a way to set various recurring events in the same view…

like this:

id: “formPases”,
height:600,
rows:
[
{ view: “rectext”, id: ‘rec_type’, name: ‘rec_type0’, label: “new scheduler 1”, labelWidth: 300, click:“updateRecType(0)” },
{ view: “rectext”, id: ‘rec_type1’, name: ‘rec_type1’, label: “new scheduler 2”, labelWidth: 300 },
{ view: “rectext”, id: ‘rec_type2’, name: ‘rec_type2’, label: “new scheduler 3”, labelWidth: 300 },
{ view: “rectext”, id: ‘rec_type3’, name: ‘rec_type3’, label: “new scheduler 4”, labelWidth: 300 },
{ view: “rectext”, id: ‘rec_type4’, name: ‘rec_type4’, label: “new scheduler 5”, labelWidth: 300 },
{ view: “rectext”, id: ‘rec_type5’, name: ‘rec_type5’, label: “new scheduler 6”, labelWidth: 300 },
{ view: “rectext”, id: ‘rec_type6’, name: ‘rec_type6’, label: “new scheduler 7”, labelWidth: 300 },
{ view: “rectext”, id: ‘rec_type7’, name: ‘rec_type7’, label: “new scheduler 8”, labelWidth: 300 },
{ view: “rectext”, id: ‘rec_type8’, name: ‘rec_type8’, label: “new scheduler 9”, labelWidth: 300 },
{ view: “rectext”, id: ‘rec_type9’, name: ‘rec_type9’, label: “new scheduler 10”, labelWidth: 300 },
{ view: “text”, hidden: true, id: ‘event_length’, name: ‘event_length’ }
]

i know the id (rec_type) is very important but maybe there is a way…

Also, i need to overwrite the label in that recurring events… but do not know how…

Thanks and regards!

Maria · May 12, 2015, 9:14am

Hello,

is there a way to set various recurring events in the same view…

Nope. Scheduler does not support such a feature.