Customize appointment indicator and add counts per day

[Rony De Sousa]

Hi,

Please see the below screenshot:

The above screenshot is what I have today, and I have 3 questions:

1. Is there a way to change the appointment indicator (blue dot icon)? I would like to use the same dot icon indicator, but an orange one instead of the blue one. Is that possible? How?

2. Instead of "No events", I need to show something like "No events on selected day", so that user can be aware that there are no events but on the selected day (there could be events on different days). Is there a way to change this message?

3. I also have to show how many records are there for a particular day and show it in somewhere, let's say in a span or div. I mean, when the user selects let's say Jan 7th, if there are 3 appointments on that particular day, I need to show a message like: "3 events found on Jan 7th". How can I achieve that?

This is an example of what I need to achieve on the question # 3:

Thanks in advance!

[Hareesh Balasubramanian]

Hi Rony, 

Greetings from Syncfusion Support..! 

We have validated all your shared queries at our end and for that, we have prepared a sample, which can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/161228/ze/Schedule_Core_Sample867399497  

Q1: Is there a way to change the appointment indicator (blue dot icon)? I would like to use the same dot icon indicator, but an orange one instead of the blue one. Is that possible? How? 

You can change the appointment indicator color by overriding the CSS as below. 

    .e-schedule .e-month-agenda-view .e-appointment-indicator { 

        background: #40af40 !important; 

    } 

Q2: Instead of "No events", I need to show something like "No events on selected day", so that user can be aware that there are no events but on the selected day (there could be events on different days). Is there a way to change this message? 

Q3: I also have to show how many records are there for a particular day and show it in somewhere, let's say in a span or div. I mean, when the user selects let's say Jan 7th, if there are 3 appointments on that particular day, I need to show a message like: "3 events found on Jan 7th". How can I achieve that? 

Both the queries can be achieved using dataBound and cellClick events of the Scheduler, please refer to the below code. 

    var selectedDate; 

    function onCellClick(args) { 

        selectedDate = args.startTime; 

        setTimeout(customFn, 10); 

    } 

 

    function onDataBound() { 

        selectedDate = this.selectedDate; 

        customFn(); 

    } 

    customFn = function () { 

       var date = selectedDate; 

        var internationalization = new ej.base.Internationalization(); 

        var format = internationalization.formatDate(new Date(date), { 

            skeleton: "MMMd" 

        }); 

        var eventContainer = document.querySelector(".e-appointment-container"); 

        if (!ej.base.isNullOrUndefined(eventContainer.children[0])) { 

           var ele = document.createElement("div"); 

            ele.setAttribute("class", "text"); 

            var parentEle = document.querySelector(".e-appointment-wrap"); 

            parentEle.insertBefore(ele, parentEle.childNodes[0]); 

            var count = eventContainer.children[0].childElementCount; 

            ele.innerText = count.toString() + " Events on " + format; 

        } else { 

            eventContainer.innerText = "No events on selected day"; 

        } 

    } 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you. 

Regards, 

Hareesh 

[Rony De Sousa]

Hi Hareesh,

Thanks for your help! It worked perfectly! I do have one more question, is it posible to show the number of events per day in the cells? Something like:

If you see, next to the dot indicator icon on the cells  with events, I need to show a small number with the events count for that cell. Only for the cells with events, the rest are fine without any indicator.

Thanks in advance! 

[Satheesh Kumar Balasubramanian]

Hi Rony,

Thanks for your update.

We have validated your reported query at our end and achieved your requirement using dataBound , navigating and actionComplete events of the scheduler. We have also prepared a sample for your reference, which can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/forum/161228/ze/Schedule_Core_Sample317517428

 

Code Snippet: 

dataBound="onDataBound" cellClick="onCellClick" navigating="OnNavigating" actionComplete="OnActionComplete">

....

....

    function OnActionComplete(args) {

        if (args.requestType === "eventCreated") {

            temp = true;

        }

    }

    function OnNavigating() {

        temp = true;

    }

    function onDataBound() {

        selectedDate = this.selectedDate;

        customFn();

        var indicatorEle = document.querySelectorAll(".e-appointment-indicator");

        for (var i = 0; i < indicatorEle.length; i++) {

            if (temp) {

                var cellEle = document.createElement("div");

                cellEle.setAttribute("class", "indicator-text");

                indicatorEle[i].parentElement.querySelector('.e-date-header').appendChild(cellEle);

            }

            else {

                var cellEle = indicatorEle[i].parentElement.querySelector('.indicator-text');

            }

            var scheduleObj = document.getElementById("schedule").ej2_instances[0];

            var eventData = scheduleObj.eventsData;

            var eventCount = 0;

            var attrribute = parseInt(indicatorEle[i].parentElement.getAttribute('data-date'));

            var date = new Date(attrribute);

            for (var j = 0; j < eventData.length; j++) {

                if ((eventData[j].StartTime.getDate() == date.getDate()) && (eventData[j].StartTime.getMonth() == date.getMonth())) {

                    eventCount++;

                }

            }

            cellEle.innerText = eventCount.toString();

        }

        var indicatorTextEle = document.querySelectorAll(".indicator-text");

        for (var i = 0; i < indicatorTextEle.length; i++) {

            if (ej.base.isNullOrUndefined(indicatorTextEle[i].parentElement.parentElement.querySelector('.e-appointment-indicator'))) {

                indicatorTextEle[i].remove();

            }

        }

        temp = false;

    }

 

Kindly try the above sample and get back to us, if you need further assistance.   

    

Regards,    

Satheesh Kumar B 

[Rony De Sousa]

Hi Satheesh,

Thanks for your response! The below two lines were particularly helpful because I didn't know how to access the events data from some events:

var scheduleObj = document.getElementById("schedule").ej2_instances[0];

var eventData = scheduleObj.eventsData;

I was able to achieve the requirement!

Thanks again & regards!

[Nevitha Ravi]

Hi Rony, 

You are most welcome..! We are glad that our provided solution helped you to meet your requirement. Please get back to us if you need any further assistance. 

Regards, 

Nevitha