I have a scheduler on my page using the calendar view, in “week” mode by default, 0-23 hours.
The height is limited so there are scroll bars in the calendar and events can be outside of view.
What I would like to do is to have an indicator in each day’s column if there is an event outside the view in the top or bottom with a small arrow. Much like it’s done in Outlook’s calendar for example.
From what I can see there is no native support for this feature?
Any suggestions how to add the arrow in the scheduler? I’ve managed to identify events outside of the view, but I haven’t managed to place the arrow correctly to indicate it.
The code I have, it uses JQuery and Font Awesome icons.
$('.dhx_cal_data').scroll(function () {
$('.dhx_cal_event').each(function () {
var id = $(this).attr('event_id');
if ($(this).offset().top + $(this).height() < $(this).parent().parent().offset().top) // Check if bottom edge of event is outside of top of visible area TODO: Some marigin for error, like mark even if 10px stick into visible area?
{
console.log('Event outside of top');
if ($('#mark_up_' + id).length > 0)
$('#mark_up_' + id).show();
else
$(this).parent().parent().append('<i id="mark_up_' + id + '" class="fa fa-arrow-up" style="top:' + $(this).parent().parent().offset().top + 'px; position:absolute; left: ' + $(this).parent().offset().left + 'px;"></i>'); // THIS SEEMS TO NOT BE PLACED CORRECTLY
}
else if ($(this).offset().top > $(this).parent().parent().offset().top + $(this).parent().parent().height() // Check if top of event is outside of bottom of visible area.
) {
console.log('Event outside of bottom');
// TODO: Add arrow for events outside bottom
}
else
{
if ($('#mark_up_' + id).length > 0)
$('#mark_up_' + id).hide();
if ($('#mark_down_' + id).length > 0)
$('#mark_down_' + id).hide();
}
});
}
);
And I don’t think it’s necessary, but just to be clear this is how my scheduler is initialized:
scheduler.config.xml_date = "%Y-%m-%d %H:%i:%s";
scheduler.config.first_hour = 0;
scheduler.config.last_hour = 24;
scheduler.config.scroll_hour = dayStart;
scheduler.config.preserve_scroll = false;
scheduler.config.readonly = true;
scheduler.attachEvent("onTemplatesReady", function () {
scheduler.templates.event_text = function (start, end, event) {
var iconHtml = "";
if (checkBits(event.icons, 1)) // Exact time
iconHtml = iconHtml + '<i class="fa fa-clock-o dhtmlx_exacttime"></i>';
if (checkBits(event.icons, 2)) // Quick task
iconHtml = iconHtml + '<div class="dhtmlx_quicktask" style="background-image: url(/images/icons/' + (event.textColor == '#FFFFFF' ? 'WB' : 'BW') + '/16/cal.png);"></div>';
return iconHtml + event.text;
}
});
scheduler.init('scheduler_besok', new Date(), "week");