This is a migrated thread and some comments may be shown as answers.

Adding events runtime into calendar

4 Answers 193 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Rupali
Top achievements
Rank 1
Rupali asked on 22 Jul 2013, 12:46 PM
hello,
I want to add events into calendar control, and that dated are saved into database.  how I add dates into events variable?

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 24 Jul 2013, 07:48 AM
Hello Rupali,

 
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.

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 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
});

0
Georgi Krustev
Telerik team
answered on 25 Jul 2013, 08:22 AM
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
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....
Tags
Calendar
Asked by
Rupali
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Rupali
Top achievements
Rank 1
Share this question
or