Schedule custom

[Marco]

Hi,

I translate Schedule labels as your indication. I use grouping.

Is it possible to hide "Timezone" checkbox and change Position label with a my custom combo box and add others field?

        @(Html.EJS().Schedule("schedule")
            .Locale("it")
            .FirstDayOfWeek(1)
            .Width("100%")
            .Height("1000px")
            .CurrentView(View.WorkWeek)
            .SelectedDate(new DateTime(2020, 5, 11))
            .StartHour("09:00")
            .EndHour("20:00")
            .Group(group => group.ByGroupID(false).Resources(ViewBag.Resources)).Resources(res =>
            {
                res.DataSource(ViewBag.Postazioni)
                .Field("PostazioneId")
                .Title("Seleziona Postazione")
                .Name("Postazioni")
                .TextField("text")
                .IdField("id")
                .ColorField("color")
                .AllowMultiple(false)
                .Add();
            }).EventSettings(e => e.Fields(f => f.Subject(sub => sub.Name("Oggetto").Title("Descrizione")).Description(des => des.Name("Description").Title("Nota"))).DataSource(ViewBag.datasource))
             .WorkDays(ViewBag.workday)
             .ActionBegin("onActionBegin")
             .Render()
            )

Thanks a lot.

[Marco]

Hi

I add two custom field but I'm not able to set them as required field.

Also I would like to hide timezone and Position.

This is my function:

    function onPopupOpen(args) {
        console.log(args.type);
        if (args.type === 'Editor') {
            // Create required custom elements in initial time
            if (!args.element.querySelector('.custom-field-row')) {

             
                var row = ej.base.createElement('div', { className: 'custom-field-row' });
                var formElement = args.element.querySelector('.e-schedule-form');
                formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
                var container = ej.base.createElement('div', { className: 'custom-field-container' });
                var inputEleServizi = ej.base.createElement('input', {
                    className: 'e-field', attrs: { name: 'Servizio',required:'true' }
                });
                var inputEleClienti = ej.base.createElement('input', {
                    className: 'e-field', attrs: { name: 'Cliente', required: 'true' }
                });
                container.appendChild(inputEleServizi);
                container.appendChild(inputEleClienti);

                row.appendChild(container);
                var drowDownListServizi = new ej.dropdowns.DropDownList({
                    dataSource: servizi,
                    fields: { text: 'text', value: 'value' },
                    value: (args.data).idServizio,
                    validationRules: { required: true },
                    validationMessage: {
                        required: "Campo Richiesto."
                    },
                    floatLabelType: 'Always', placeholder: 'Seleziona Servizio'
                });
                var drowDownListClienti = new ej.dropdowns.DropDownList({
                    dataSource: clienti,
                    fields: { text: 'text', value: 'value' },
                    value: (args.data).idCliente,
                    validationRules: { required: true },
                    validationMessage: {
                        required: "Campo Richiesto."
                    },
                    floatLabelType: 'Always',
                    placeholder: 'Seleziona Cliente'                   
                });
                drowDownListServizi.appendTo(inputEleServizi);
                drowDownListClienti.appendTo(inputEleClienti);
                inputEleServizi.setAttribute('name', 'idServizio');
                inputEleServizi.required = true;
                inputEleServizi.setAttribute('required', true);
                inputEleClienti.setAttribute('name', 'idCliente');
            }
        }   
    }

[Ravikumar Venkatesan]

Hi Marco, 

Greetings from Syncfusion support. 

1. Is it possible to hide "Timezone" checkbox 

We have validated your above query at our end. We can hide the time zone checkbox with the help of CSS code like the below. 

[index.cshtml] 

@using Syncfusion.EJ2.Schedule 

 

@(Html.EJS().Schedule("schedule") 

  .Locale("it") 

  .FirstDayOfWeek(1) 

  .Width("100%") 

  .Height("1000px") 

  .CurrentView(View.WorkWeek) 

  .SelectedDate(new DateTime(2020, 5, 11)) 

  .StartHour("09:00") 

  .EndHour("20:00") 

  .Group(group => group.ByGroupID(false).Resources(ViewBag.Resources)) 

  .Resources(res =>{res.DataSource(ViewBag.Postazioni).Field("PostazioneId").Title("Seleziona Postazione").Name("Postazioni").TextField("text").IdField("id").ColorField("color").AllowMultiple(false).Add();}) 

  .EventSettings(e => e.Fields(f => f.Subject(sub => sub.Name("Oggetto").Title("Descrizione")).Description(des => des.Name("Description").Title("Nota"))).DataSource(ViewBag.datasource)) 

  .WorkDays(ViewBag.workday) 

  .Render() 

) 

 

<style> 

    .e-time-zone-container { 

       display: none; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/forum/154359/ze/EJ2-MVC-Schedule-Sample660044522 

2. change Position label with a my custom combo box and add others field? 

We have validated your above query at our end. We can add the additional field to the editor window with the help of the popupOpen event. 

Kindly refer to the below UG link for how to add additional fields to the default editor window and get back to us If you would require further assistance. 

UG (Add additional fields to the default editor): https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/editor-template/#add-additional-fields-to-the-default-editor 

Regards, 

Ravikumar Venkatesan 

[Marco]

Thanks. I hide timezone. Is it possibile to hide location field?

How may i customize the string "This filed is required" ?

[Ravikumar Venkatesan]

Hi Marco, 

Thanks for the update. 

1. Is it possible to hide location field? 

We have validated your above query at our end. We can hide the location field in the default editor window with the help of CSS code like the below. 

<style> 

    .e-time-zone-container, .e-location-container { 

        display: none; 

    } 

</style> 

2. How may i customize the string "This filed is required" ? 

We have validated your above query at our end. We can set the required field and custom error message to the required field like the below code. 

<script type="text/javascript"> 

    function onPopupOpen(args) { 

        if (args.type === 'Editor') { 

            if (!args.element.querySelector('.custom-field-row')) { 

                var row = ej.base.createElement('div', { className: 'custom-field-row' }); 

                var formElement = args.element.querySelector('.e-schedule-form'); 

                formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row')); 

 

                var container = ej.base.createElement('div', { className: 'custom-field-container' }); 

 

                var inputEleServizi = ej.base.createElement('input', { 

                    className: 'e-field', attrs: { name: 'Servizio', required: 'true' } 

                }); 

                var inputEleClienti = ej.base.createElement('input', { 

                    className: 'e-field', attrs: { name: 'Cliente', required: 'true' } 

                }); 

 

                container.appendChild(inputEleServizi); 

                container.appendChild(inputEleClienti); 

 

                row.appendChild(container); 

 

                var drowDownListServizi = new ej.dropdowns.DropDownList({ 

                    dataSource: [ 

                        { text: 'Servizi 1', value: 'servizi-1' }, 

                        { text: 'Servizi 2', value: 'servizi-2' }, 

                        { text: 'Servizi 3', value: 'servizi-3' }, 

                        { text: 'Servizi 4', value: 'servizi-4' } 

                    ], 

                    fields: { text: 'text', value: 'value' }, 

                    value: (args.data).idServizio, 

                    floatLabelType: 'Always', placeholder: 'Seleziona Servizio' 

                }); 

 

                var drowDownListClienti = new ej.dropdowns.DropDownList({ 

                    dataSource: [ 

                        { text: 'Clienti 1', value: 'clienti-1' }, 

                        { text: 'Clienti 2', value: 'clienti-2' }, 

                        { text: 'Clienti 3', value: 'clienti-3' }, 

                        { text: 'Clienti 4', value: 'clienti-4' } 

                    ], 

                    fields: { text: 'text', value: 'value' }, 

                    value: (args.data).idCliente, 

                    floatLabelType: 'Always', 

                    placeholder: 'Seleziona Cliente' 

                }); 

 

               drowDownListServizi.appendTo(inputEleServizi); 

                drowDownListClienti.appendTo(inputEleClienti); 

 

                inputEleServizi.setAttribute('name', 'idServizio'); 

                inputEleClienti.setAttribute('name', 'idCliente'); 

 

                var validator = ((formElement).ej2_instances[0]); 

                validator.addRules('idServizio', { required: [true, 'Campo Richiesto.'] }); 

                validator.addRules('idCliente', { required: [true, 'Campo Richiesto.'] }); 

           } 

        } 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/154359/ze/EJ2-MVC-Schedule-Validation1399837371 

Kindly try the above sample and get back to us If you would require further assistance. 

Regards, 

Ravikumar Venkatesan 

[Marco]

Thanks a lot for your answer.

[Vengatesh Maniraj]

Hi Marco, 

 

You are most welcome. 

 

Regards, 

Vengatesh