1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Schedule custom

Schedule custom

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.


6 Replies
MA Marco May 19, 2020 01:23 PM UTC

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');
            }
        }   
    }

RV Ravikumar Venkatesan Syncfusion Team May 19, 2020 01:30 PM UTC

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> 


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. 


Regards, 
Ravikumar Venkatesan 


MA Marco May 19, 2020 01:35 PM UTC

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

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

RV Ravikumar Venkatesan Syncfusion Team May 20, 2020 09:12 AM UTC

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> 


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

Regards, 
Ravikumar Venkatesan 


MA Marco May 22, 2020 08:04 AM UTC

Thanks a lot for your answer.

VM Vengatesh Maniraj Syncfusion Team May 25, 2020 03:57 AM UTC

Hi Marco, 
 
You are most welcome. 
 
Regards, 
Vengatesh  


Loader.
Up arrow icon