Refresh Special Dates

[Marco]

Hello,

I use RenderDayCell to highlight special dates how your example ( ASP.NET MVC Calendar Special Dates Example - Syncfusion Demos)

I would like to remove highlight to a single date.

How may I refresh the special dates at runtime without reload the page?

[Sureshkumar P]

Hi Marco,

We suggest you call the navigateTo method to refresh the calendar component without reloading the page. By using this you can customize the component special dates by dynamically using the same renderdaycell event.

Find the code example here:

@Html.EJS().Calendar("calendar").RenderDayCell("customDates").Change("valueChange").Render()

<button onclick="ButtonClick()">Click to refresh the calebndar</button>

 

<script>

    function ButtonClick() {

        var instance = document.getElementById("calendar").ej2_instances[0];

        instance.navigateTo("Month");

    }

    var addClass = ej.base.addClass;

    function customDates(args) {

        /*Date need to be customized*/

        var span;

        if (args.date.getDate() === 10) {

            specialDate(args, "Birthday");

        }

        if (args.date.getDate() === 15) {

            specialDate(args, "Farewell");

        }

        if (args.date.getDate() === 25) {

            specialDate(args, "Vacation");

        }

    }

 

    function specialDate(args, name) {

        span = document.createElement('span');

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

        //use the imported method to add the multiple classes to the given element

        addClass([args.element], ['special', 'e-day', name.toLowerCase()]);

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

        args.element.setAttribute('title', name + '!');

        args.element.appendChild(span);

    }

 

    function valueChange(args) {

        var title = '';

        if (args.event) {

            title = event.currentTarget.getAttribute('data-val');

            title = title == null ? '' : ' ( ' + title + ' )';

        }

        /*Displays selected date in the label*/

        var globalize = new ej.base.Internationalization(this.locale);

        var selectedValue = globalize.formatDate(args.value);

        document.getElementById('date_label').textContent = 'Selected Value: ' + selectedValue + title;

 

    }

 

</script>

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P

[Marco]

Thanks a lot

[Sureshkumar P]

Marco,

Thanks for your update.

Regards,

Sureshkumar P