4 Answers, 1 is accepted
0
Hello Rupali,
Georgi Krustev
Telerik
The Calendar widget is designed to display days/months/years/decades and respectively to allow selection. It also allow to define a custom template. I am not sure what your scenario exactly is and I will ask you to elaborate more on it.
As a side note, if you need to show events and allow interaction with then probably you can try our new Scheduler widget.
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rupali
Top achievements
Rank 1
answered on 24 Jul 2013, 09:26 AM
hello,
I want to add multiple events into calendar and that dates are highlight by color. I fetch dates from database and binding that dates into event variable. After that I binding that events variable with calendar control but only single (last date ) highlight into calendar. Please help me how I add dates into events variable. My code is as follows:
$(document).ready(function() {
for(var i=0;i<len;i++){
var d_month=results.rows.item(i).Month;
var d_year=results.rows.item(i).Year;
var d_date=results.rows.item(i).Date;
events = [+new Date(d_year, d_month-1, d_date)];
}
$("#calendar").kendoCalendar({
dates: events,
month: {
// template for dates in month view
content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
'<div class="' +
'# if (data.value < 10) { #' +
"exhibition" +
'# } else if ( data.value < 20 ) { #' +
"party" +
'# } else { #' +
"cocktail" +
'# } #' +
'">#= data.value #</div>' +
'# } else { #' +
'#= data.value #' +
'# } #'
},
footer: false
});
I want to add multiple events into calendar and that dates are highlight by color. I fetch dates from database and binding that dates into event variable. After that I binding that events variable with calendar control but only single (last date ) highlight into calendar. Please help me how I add dates into events variable. My code is as follows:
$(document).ready(function() {
for(var i=0;i<len;i++){
var d_month=results.rows.item(i).Month;
var d_year=results.rows.item(i).Year;
var d_date=results.rows.item(i).Date;
events = [+new Date(d_year, d_month-1, d_date)];
}
$("#calendar").kendoCalendar({
dates: events,
month: {
// template for dates in month view
content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
'<div class="' +
'# if (data.value < 10) { #' +
"exhibition" +
'# } else if ( data.value < 20 ) { #' +
"party" +
'# } else { #' +
"cocktail" +
'# } #' +
'">#= data.value #</div>' +
'# } else { #' +
'#= data.value #' +
'# } #'
},
footer: false
});
0
Hello again Rupali,
I believe that you are passing the list of dates as a dates option of the calendar. If this is the case then you will need to define your logic when and whether you want hightlight the dates. The aforementioned template will check whether the current date can be found the dates list (please note that dates list actually is list of milliseconds and that is why isArray works) and then depending on the current day (data.value) shows different icon. In order to acheive your goal you will need to implement the correct content template.
Regards,
Georgi Krustev
Telerik
I believe that you are passing the list of dates as a dates option of the calendar. If this is the case then you will need to define your logic when and whether you want hightlight the dates. The aforementioned template will check whether the current date can be found the dates list (please note that dates list actually is list of milliseconds and that is why isArray works) and then depending on the current day (data.value) shows different icon. In order to acheive your goal you will need to implement the correct content template.
Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rupali
Top achievements
Rank 1
answered on 25 Jul 2013, 11:05 AM
Thank you for reply....