Scheduler - Custom MiniCalendar "Marker"

Hi,

in the dhtmlxscheduler_minical.js in renderCalendar it calls:

... var start = scheduler.date.month_start(date); var end = scheduler.date.add(start, 1, "month"); var evs = this.getEvents(start, end); var filter = this["filter_" + this._mode]; for (var i = 0; i < evs.length; i++) { var ev = evs[i]; if (filter && !filter(ev.id, ev)) continue; var d = ev.start_date; if (d.valueOf() < start.valueOf()) d = start; d = scheduler.date.date_part(new Date(d.valueOf())); while (d < ev.end_date) { this.markCalendar(cal, d, "dhx_year_event"); d = this.date.add(d, 1, "day"); if (d.valueOf() >= end.valueOf()) break; } } ...
if you link the calendar, would like to be able to link the calendar, and paint the events customly in an easy way. Without having to override the entire link and render functions.

I got 2 solutions, either we add/edit the following parts into dhtmlxscheduler_minical.js:
Move the “painting” code to a new function: scheduler._markCalendarEvents = function(cal, start, end) { var evs = this.getEvents(start, end); var filter = this["filter_" + this._mode]; for (var i = 0; i < evs.length; i++) { var ev = evs[i]; if (filter && !filter(ev.id, ev)) continue; var d = ev.start_date; if (d.valueOf() < start.valueOf()) d = start; d = scheduler.date.date_part(new Date(d.valueOf())); while (d < ev.end_date) { this.markCalendar(cal, d, "dhx_year_event"); d = this.date.add(d, 1, "day"); if (d.valueOf() >= end.valueOf()) break; } } };
Add a configuration in the top with default value to call default paint function

scheduler.config.minicalendar_marker =  scheduler._markCalendarEvents;

Replace the segment in renderCalendar with a call to the new config function.

... var start = scheduler.date.month_start(date); var end = scheduler.date.add(start, 1, "month"); scheduler.config.minicalendar_marker(cal, start, end); ...

Or another solution would be adding another event like:

... var start = scheduler.date.month_start(date); var end = scheduler.date.add(start, 1, "month"); scheduler.callEvent("onMarkMiniCalendar", [cal, start, end]); ...
And adding default

[code]scheduler.attachEvent(“onMarkMiniCalendar”, function (cal, start, end) {
var evs = this.getEvents(start, end);
var filter = this[“filter_” + this._mode];
for (var i = 0; i < evs.length; i++) {
var ev = evs[i];
if (filter && !filter(ev.id, ev))
continue;
var d = ev.start_date;
if (d.valueOf() < start.valueOf())
d = start;
d = scheduler.date.date_part(new Date(d.valueOf()));
while (d < ev.end_date) {
this.markCalendar(cal, d, “dhx_year_event”);
d = this.date.add(d, 1, “day”);
if (d.valueOf() >= end.valueOf())
break;
}
}

return true;

});[/code]

However attaching by event would still run the default marker even which might be unnecessary if the user would like to color all the days by himself. Either user would overpaint it again and we just wasted performance or maybe he doesn’t want to mark those days.

By the first solution the user could call scheduler._markCalendarEvents(cal,start,end) after their own painting method to use the default as well.

This is mainly a suggestion to implement this in the source, since I’d prefer to run an unmodified version as that will be easier with updates and upgrades. Also then there would most likely be a documentation for it so my colleges can read there when necessary :slight_smile:

Hello,

Thank you for sharing to the code but can you simply explain what you tried to achieve? Your use case, preferably with screenshots :slight_smile:

Kind regards,
Ilya

So we are using the calendar to show a type of workschedule, where events can have different statuses, like Performed, Planned, Missed etc.

Instead of having the minicalendar mark the days by checking where there is events.
I am calling the server to get a list of dates and statuses for those days.
Where the server then will check whether all events on said date have been performed or if there’s an event that was missed or skipped due to unforeseen circumstances, and return a style based on this status.

Client side will then use markCalendar() to set the styles/colors of these days depending on the data that the server returns.

Basically trying to do something like this:


Where the colors might mean something like:
green - all events were performed
yellow - something was missed
orange - something got changed

I am thinking of what to do with the week marker if I should disable that as well or not.

Hello,

And at what point do you apply your own colors?

Best regards,
Ilya

[code]scheduler.config.minicalendar_marker = function (cal, start, end) {
var lf = scheduler.templates.load_format;

$.getJSON("Handlers/CalendarDates.ashx?from=" + lf(start) + "&to=" + lf(end), function (data) {
    $.each(data, function (key, val) {
        var date = scheduler.templates.xml_date(val.Date);
        scheduler.markCalendar(cal, date, val.Style);
    });
});

};[/code]

using the first solution, and calendar is linked using linkCalendar() so basically on all events that triggers it ? :slight_smile: