We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customizing checkbox in scheduler

Hi,

I want to customize a checkbox exactly beside existing two checkboxes, and also an event should be trigeered when the checkbox is checked, once the checkbox is checked it should display two radio buttons just like timezone checkbox


4 Replies 1 reply marked as answer

ST Swati Thorali November 7, 2022 01:58 AM

Please suggest a solution Asap



SR Swathi Ravi Syncfusion Team November 8, 2022 08:01 AM

This requirement can be achieved with the help of the popupOpen event of the Schedule and the change event of the CheckBox as shared in the below snippet.


Sample: https://stackblitz.com/edit/angular-hdtaul?file=app.component.ts

Api:  https://ej2.syncfusion.com/angular/documentation/api/check-box/checkBoxModel/#change

https://ej2.syncfusion.com/angular/documentation/api/schedule#popupopen


[app.component.ts]

 

@Component({

  // tslint:disable-next-line:component-selector

  selector: 'app-root',

  templateUrl: 'app.component.html',

  styles: [

    `.custom-field-container {

        margin-left: 10px;

    }`,

    `.default-field-container{

      display: none;

    }`,

    `.e-enable{

      display: block;

    }`,

  ],

  })

 

public onPopupOpen(argsPopupOpenEventArgs): void {

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

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

        // Create required custom elements in initial time

        const formElementHTMLElement = args.element.querySelector(

          '.e-schedule-form'

        ) as HTMLElement;

        const containerHTMLElement = createElement('div', {

          className: 'custom-field-container',

        });

        const inputEleHTMLElement = createElement('input', {

          className: 'e-field',

          attrs: { label: 'Default' },

        });

        (

          formElement.querySelector('.e-all-day-time-zone-row'as HTMLElement

        ).appendChild(container);

        container.appendChild(inputEle);

        const checkboxCheckBox = new CheckBox({

          label: 'Default',

          change: this.onChange.bind(this),

        });

        checkbox.appendTo(inputEle);

        inputEle.setAttribute('name''Default');

        const defaultContainerHTMLElement = createElement('div', {

          className: 'default-field-container ',

        });

        const inputEle1HTMLElement = createElement('input', {

          className: 'e-field',

          attrs: { label: 'Radiobutton' },

        });

        inputEle1.setAttribute('data-name''state');

        const inputEle2HTMLElement = createElement('input', {

          className: 'e-field',

          attrs: { label: 'Radiobutton' },

        });

        inputEle2.setAttribute('data-name''state');

        formElement.firstChild.insertBefore(

          defaultContainer,

          args.element.querySelector('.e-time-zone-row')

        );

        defaultContainer.appendChild(inputEle1);

        defaultContainer.appendChild(inputEle2);

        const radiobutton1RadioButton = new RadioButton({

          label: 'Radiobutton1',

          name: 'state',

          checked: true,

        });

        const radiobutton2RadioButton = new RadioButton({

          label: 'Radiobutton2',

          name: 'state',

        });

        radiobutton1.appendTo(inputEle1);

        radiobutton2.appendTo(inputEle2);

      }

    }

  }

  private onChange(argsChangeEventArgs): void {

    const radiobuttondivHTMLElement = document.querySelector(

      '.default-field-container'

    ) as HTMLElement;

    if (args.checked) {

      addClass([radiobuttondiv], 'e-enable');

    } else {

      removeClass([radiobuttondiv], 'e-enable');

    }

  }


Marked as answer

ST Swati Thorali replied to Swathi Ravi November 9, 2022 01:10 AM

Hi ,

Thank you for the snippet, this is what I was looking for and it really helped me,

Just want to one more customization that is when I select the radio button I need a particular time slot(8:00 Am - 12 PM) to be triggered to starttime and endtime, is it possible?



SR Swathi Ravi Syncfusion Team November 10, 2022 08:47 AM

This is possible with the help of the radio button's change event. 


Sample: https://stackblitz.com/edit/angular-hdtaul-ggcq3u?file=app.component.ts

Api: https://ej2.syncfusion.com/angular/documentation/api/radio-button/#change


[app.component.ts]

 

 public onPopupOpen(argsPopupOpenEventArgs): void {

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

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

        const radiobutton1RadioButton = new RadioButton({

          label: '8:00 Am - 12 PM',

          name: 'state',

          value: '1',

          change: this.OnChange.bind(this),

        });

        const radiobutton2RadioButton = new RadioButton({

          label: '12 PM - 4: 00 PM',

          name: 'state',

          change: this.OnChange.bind(this),

          value: '2',

        });

        radiobutton1.appendTo(inputEle1);

        radiobutton2.appendTo(inputEle2);

      }

    }

  }

   private OnChange(args): void {

    const startDate = (document.getElementById('StartTime'as any)

      .ej2_instances[0].value;

    const date1 = new Date(startDate.setHours(args.value === '1' ? 8 : 120));

    (document.getElementById('StartTime'as any).ej2_instances[0].value =

      date1;

    const EndDate = (document.getElementById('EndTime'as any).ej2_instances[0]

      .value;

    const date2= new Date(EndDate.setHours(args.value === '1' ? 12 : 160));

    (document.getElementById('EndTime'as any).ej2_instances[0].value = date2;

  }


Loader.
Live Chat Icon For mobile
Up arrow icon