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

Schedule Calendar Special Date

Hi, would it be possible to customize the calendar cells of a scheduler like at the following link https://ej2.syncfusion.com/aspnetmvc/Calendar/SpecialDates#/fluent ?



1 Reply

VR Vijay Ravi Syncfusion Team April 3, 2023 01:46 PM UTC

Hi Marco,


RenderDayCell: https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Calendars.Calendar.html#Syncfusion_EJ2_Calendars_Calendar_RenderDayCell


You can customize the calendar cells of Scheduler, like in your shared sample, by using the ActionComplete event of Scheduler with the code below. In the shared sample, we highlighted the days in the date picker that have appointments.


[index.cshtml]


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

       .ActionComplete("onActionComplete")

       .Render()

)

 

<script type="text/javascript">

       function onActionComplete(args) {

        if (args.requestType === "toolBarItemRendered" || args.requestType === 'eventCreated' || args.requestType === 'eventChanged' || args.requestType === 'eventRemoved') {

            var span;

            var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];

            var datas = scheduleObj.eventSettings.dataSource;

            (scheduleObj.element.querySelectorAll('.e-schedule-toolbar .e-date-range')[0]).click();

            var calendar = (scheduleObj.element.querySelectorAll('.e-calendar')[0]).ej2_instances[0];

 

            calendar.renderDayCell = function (args) {

                (datas).forEach(function (data) {

                    if (args.date.getTime() - (new Date(data.StartTime.getFullYear(), data.StartTime.getMonth(), data.StartTime.getDate())).getTime() === 0) {

                        span = document.createElement('span');

                        span.setAttribute('class', 'e-icons highlight');

                        args.element.setAttribute('title', 'Event!');

                        args.element.firstElementChild.setAttribute('title', 'Event !');

                        args.element.appendChild(span);

                    }

                });

            };

            calendar.refresh();

            (scheduleObj.element.querySelectorAll('.e-schedule-toolbar .e-date-range')[0]).click();

        }

    }


Regards,

Vijay Ravi


Attachment: datepicker_4652a925.zip

Loader.
Up arrow icon