DHTMLX Scheduler Month View only event count - dhtml

1) In month view events are visible, instead of those events I want to show the counts only. How this can be achieved in DHTMLX Scheduler JS version.
2) Enable date area click event in month view, not the event_link which directs to day or week view. Just need an event when In month view a date box is clicked I have to load events of that day only on click.

It can be implemented using scheduler.addMarkedTimespan() method. You need to iterate all days during the month, count events for each day by scheduler.getEvents() and then specify the result in the html parameter of addMarkedTimespan.
function addEvCount(){
var startDate = scheduler.getState().min_date;
var endMonthDate = scheduler.getState().max_date;
while(startDate.getTime() < endMonthDate.getTime()){
var endDayDate = scheduler.date.add(startDate, 1, 'day');
var evs = scheduler.getEvents(startDate, endDayDate);
if(evs.length){
scheduler.addMarkedTimespan({
start_date: startDate,
end_date: endDayDate,
html:"<div style='text-align:center;'><b>"+evs.length+"</b></div>",
css: "color"
});
}
startDate = endDayDate;
}
scheduler.updateView();
}
Please check how it works in the snippet.
To hide all events, use also Filtering Events.
scheduler.filter_month = function(id, event){
return false; // event will not be rendered
}
The updated demo only with numbers and without rendered events.
Related docs: addMarkedTimespan(), getEvents(), Filtering.
There is onEmptyClick event which fires when the user clicks on an empty space in the scheduler (not on events). Demo.

Related

DHTMLX Scheduler timeline click on day_date

In a scheduler timeline view having a second_scale, is it possible to click on a single date? I have found this answer, but I'm wondering if there is an event in the meantime.
There are onXScaleClick, onXScaleDblClick events for the Timeline view. But in case, when you have 2 scales, they fire only for the second one. Check console in the snippet that demonstrates it.
Nonetheless, you can add onclick event listener for the first scale using js:
var dateScaleEl = document.querySelector(".dhx_second_scale_bar");
dateScaleEl.onclick = function() {
var targetDate = scheduler.getState().date;
console.log(targetDate);
}
Demo.
getState() is a method to get the active date.

Kendo Scheduler Remove Line that is in other month

I would like to remove a complete line of days in the scheduler (Month View) when all the days in the line belong to an other month.
ex1:
In this exemple i want to remove the first line (25 to 31) because they belong to the other month completly, but we want to keep the (1 to 4) in the last line.
ex:2
In this exemple i want to remove the last line (5 to 11) because they belong to the other month completly, but we want to keep the (29-31) in the first line.
I didn't find anything to help me achieve this task. Anyone know if there is a way to do it?
EDIT
Based on #himawan_r answer's, i did this to remove the line.
$(".k-scheduler-table tr").each(function (index, element) {
if (index === 0) return;
var shouldBeHidden = true;
$(this).find("td").each(function (i, elm) {
if (!$(elm).hasClass("k-other-month")) {
shouldBeHidden = false;
}
});
if (shouldBeHidden) {
$(this).hide();
}
});
now the problem is that Kendo render the events on the wrong cell, and sometime it's overflowing on 2 cell.
I don't know if we can tell Kendo to rerender only the events, because when i rezise the element, it's fixing the issues.
I would like to give a suggestion by utilizing :
Make use of scheduler dataBound event to hide the date and event (not work yet on recurring event)
In the scheduler edit function add conditional to to prevent the popup to appear if they click on date that is hidden
take a look at this dojo
Brief explanation (check this part of the code)
dataBound: function(e) {
//since if we hide the <td> the current month date will be be shifted to the left,
//instead hide all the date <span> on all k-other-month <td> or more specific,
//however you mentioned about completely belong to other month, maybe you could create more specific selector
$("td.k-other-month span").hide();
//we cant hide the event using $("td.k-other-month div").hide() since the event element not inside the td
//you can hide it this way, however
//in this example the event is recurring thus i cant find any event that is outside of this month scheduler create multiple event based on recurring rule
//if there is only common event i think this code will work
var data = e.sender.dataSource.data();
var currentMonth = e.sender.view()._firstDayOfMonth.getMonth();
for(var i = 0; i< data.length ; i++){
if(data[i].start.getMonth() !== currentMonth){
$("div.k-scheduler-content div[data-uid='"+ data[i].uuid +"']").hide();
}
}
}
and
edit: function(e) {
//here i add conditional to prevent the edit/new event popup to appear if it is outside of current month
//you can create your own logic if needed
if(e.event.end.getMonth() !== e.sender.view()._firstDayOfMonth.getMonth()){
e.preventDefault();
}
},
then you can apply your requirement from there i guess.
you can hide those dates using CSS
.k-other-month {
background-color: white !important;
position: relative;
z-index: 1;
}
.k-other-month .k-nav-day {
color:white !important;
}

Customized Monthly View to show number Kendo scheduler

How can I customize the Kendo scheduler's month view, so that it shows the count of events on each cell?
Is there anyway to navigate through each cell of the month view programmatically?
Any hint or direction is greatly appreciated.
All I need is to achieve the following effect:
The hardest part of this question is to navigate through all the cells in month view. The following code does the job:
var scheduler = $("#scheduler").data("kendoScheduler");
var view = scheduler.view();
var slots = view.table.find("td[role='gridcell']");
slots.each(function () {
var slot = scheduler.slotByElement(this);
//do whatever you want here with the slot variable
}
Hope it helps.

Jquery fullCalendar filter events and can't render the filtered events

This is my first time asking a question here. I am using the jQuery plugin fullCalendar and for the most part I have it working great with exception of one problem. I have added a filter to the calendar events where when a user clicks on a checkbox, I want to reload the calendar and query a database to get the filtered results. I am able to do this without problems but, if I am on a month that is not the current month, the calendar will always go back to the current month with the filtered results. The user would then have to click on the prev/next buttons to get back the that they were on.
One solution that seems to work up to a point is this:
function reloadCalendar(formInputs, height, view, startView, endView) {
var source1 = {
url: 'ajax.php?c=careerDevCalendar&a=getEvents',
data: {
filter: formInputs
}
};
var s = Math.round(startView.getTime() / 1000);
var e = Math.round(endView.getTime() / 1000);
var source = 'ajax.php?c=careerDevCalendar&a=getEvents&startF='+s+'&endF='+e+'&'+formInputs;
$("#calendar").fullCalendar('removeEvents');
$("#calendar").fullCalendar('removeEventSource', source1);
$("#calendar").fullCalendar('addEventSource', source);
$("#calendar").fullCalendar('rerenderEvents');
}
I am able to get the filtered results in a JSON array and the calendar stays on the month that I happen to be on, but it won't render the events in the calendar. Does anybody have any ideas on what I can do to filter events without having the calendar go back to the current month?
Thanks in advance

Tridion Date Picker - access to events

I have a Tridion Date control added to a GUI Extension .aspx page I have created.
I've added this to the ASPX page with
<c:Date id="AdjustDate" runat="server"
IsSeparateFields="false" AddClearButton="false" TabIndex="3"></c:Date>
and in my .JS I've added the following to
Give me a handle onto the Tridion Date Control (to select the date values etc.)
c.AdjustDate =
$controls.getControl($("#AdjustDate"),
"Tridion.Controls.Date")
Capture changes in the date (after the user selects OK in the modaldialog)
$evt.addEventHandler(c.AdjustDate, "change",
this.getDelegate(this._onHighlightDateChange));
I capture the event and perform some updates based on the date selected.
However, my GUI extension dialog is smaller in height than when the modal dialog is shown. I'd like to resize my ASPX dialog when the user clicks Select Date and the modal dialog is presented.
I've now captured the event of the user clicking the Select Date button
c.BtnDateSelect = $controls.getControl($("#AdjustDate_selectbutton"),
"Tridion.Controls.Button");
$evt.addEventHandler(c.BtnDateSelect, "click",
this.getDelegate(this._onDateButtonClicked));
However - I can't seem to access the height of the resulting dialog as I can't add any events to tie in
the opening of the dialog itself
the user clicking OK or Cancel (to adjust the height again) or
the modal dialog being closed
Am I missing events to tie into?
I've tried to create a handle to the OK button using
BtnDateOKSelect =
$controls.getControl($("html#DatePickerPopup.popup body center div#buttonContainer div#ButtonOk.tridion"),
"Tridion.Controls.Button");
but the reference (and variations of it) return undefined - possibly as this is in an iframe so the script can't access it?
Any pointers on working out what the events are I can tie into?
How to tie into those events (and when)?
Thanks
You cannot resize a dialog (modal) after it has been open. I wrote an extension where I had a similar problem, when my date picker was over my modal dialog, It look weird, so I made my dialog date picker bigger.
However I wasn't using a date picker control, but a regular html button. Here the code:
So I retrieve button and add the handler to show the date picker:
c.BtnStartDate = $controls.getControl($("#startDate"), "Tridion.Controls.Button");
$evt.addEventHandler(c.BtnStartDate, "click", this.getDelegate(this._onStartDateButtonClicked));
This is the code in the event:
SetDateRange$_onStartDateButtonClicked(event) {
this._setDate(event, "#startDate");
};
And the setDate function:
SetDateRange.prototype._setDate = function SetDateRange$_setDate(event, controlSelector) {
var p = this.properties;
var currentDate = new Date();
var c = p.controls;
p.datePickerPopup = $popup.create(
$cme.Popups.DATE_PICKER.URL, {
width: 550,
height: 350
},
{
date: currentDate,
popupType: Tridion.Controls.Popup.Type.MODAL_IFRAME
}
);
function SetDateRange$DatePicker$onPopupCanceled(event) {
if (p.datePickerPopup) {
p.datePickerPopup.dispose();
p.datePickerPopup = null;
}
}
function SetDateRange$DatePicker$onPopupSubmitted(event) {
var value = event.data.date;
if (value) {
var value = new Date(value);
value = $localization.getFormattedDateTime(value, Tridion.Runtime.LocaleInfo.fullDateTimeFormat);
jQuery(controlSelector).trigger('setdate', [value]);
}
p.datePickerPopup.dispose();
p.datePickerPopup = null;
}
$evt.addEventHandler(p.datePickerPopup, "unload", SetDateRange$DatePicker$onPopupCanceled);
$evt.addEventHandler(p.datePickerPopup, "submit", SetDateRange$DatePicker$onPopupSubmitted);
$evt.addEventHandler(p.datePickerPopup, "close", SetDateRange$DatePicker$onPopupCanceled);
p.datePickerPopup.open();
};
Again, it might not be the solution to your scenario, but this example shows how to open the date picker dialog and use the values it returns, without using the "Tridion Date Picker Control".
Hope this helps.

Resources