<link href="../css/dhtmlxscheduler.css" rel="Stylesheet" type="text/css" media="screen" />
<script src="../js/dhtmlxscheduler.js" type="text/javascript"></script>
<script src="../js/dhtmlxscheduler_timeline.js" type="text/javascript"></script>
<script src="../js/dhtmlxscheduler_all_timed.js" type="text/javascript"></script>
<script src="../js/dhtmlxscheduler_tooltip.js" type="text/javascript"></script>
<script src="../js/dhtmlxscheduler_active_links.js" type="text/javascript"></script>
CSS for dhtmlxscheduler:
/* ######### css for dhtmlxscheduler (required) ######### */
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
.white_cell{
background-color:white;
}
.green_cell{
background-color:#95FF95;
}
.yellow_cell{
background-color:#FFFF79;
}
.red_cell{
background-color:#FF5353;
}
/* tooltip (dhtmlxscheduler extenstion) */
.one_line{
white-space:nowrap;
overflow:hidden;
padding-top:5px; padding-left:5px;
text-align:left !important;
}
JS for displaying data:
$(document).ready(function() {
/* ######### dhtmlxscheduler config ######### */
scheduler.config.start_on_monday = false;
scheduler.config.multi_day = true;
scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.section_custom = "Section";
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.xml_date = "%n/%d/%Y %H:%i";
scheduler.config.readonly_form = true;
scheduler.config.readonly = true;
scheduler.config.show_loading = true;
scheduler.config.all_timed = "short"; // only events < 24 hours will be displayed as usual ones
/* ######### tooltip ######### */
scheduler.templates.tooltip_date_format = scheduler.date.date_to_str("%n/%d/%Y %H:%i");
scheduler.templates.tooltip_text = function(start, end, event) {
var tooltipTxt = "<b>Ref #:</b> " + event.RefNo + "<br/>";
tooltipTxt += "<b>Title:</b> " + event.Title + "<br/>";
tooltipTxt += "<b>Start Date:</b> " + scheduler.templates.tooltip_date_format(start) + "<br/>";
tooltipTxt += "<b>End Date:</b> " + scheduler.templates.tooltip_date_format(end) + "<br/>";
return tooltipTxt;
};
/* ######### custom css per event ######### */
scheduler.templates.event_class = function(start, end, event) {
return event.CssClass; // CssClass is an event property
};
/* ######### custom behavior when clicking an event ######### */
scheduler.attachEvent("onClick", function(event_id, native_event_object) {
window.open(scheduler.getEvent(event_id).URL);
});
scheduler.init("scheduler_here", null, "month");
/* ######### load data from web service (initial) ######### */
$.ajax({
type: "GET",
url: "Your_WebService.asmx/GetData",
dataType: 'json', // datatype returned by the webservice
contentType: "application/json; charset=utf-8",
data: {
selectedYear: "'" + scheduler.getState().date.getFullYear() + "'", // the year displayed by the calendar
selectedMonth: "'" + scheduler.getState().date.getMonth()+ "'" // the month displayed by the calendar
},
success: function(doc) {
scheduler.parse(doc.d, "json");
}
});
/* ######### load data from web service (on view change) ######### */
scheduler.attachEvent("onViewChange", function(mode, date) {
$.ajax({
type: "GET",
url: "Your_WebService.asmx/GetData",
dataType: 'json', // datatype returned by the webservice
contentType: "application/json; charset=utf-8",
data: {
selectedYear: "'" + date.getFullYear() + "'", // the year displayed by the calendar
selectedMonth: "'" + date.getMonth()+ "'" // the month displayed by the calendar
},
success: function(doc) {
scheduler.clearAll(); // clear all data and then load new data
scheduler.parse(doc.d, "json");
}
});
});
});
HTML for dhtmlxscheduler:
<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100%;">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
(Web service) Struct for event:
public struct MyEvent
{
public string Id;
public string RefNo;
public string text; // (fixed) naming convention to be used by dhtmlxscheduler
public string CssClass;
public string start_date; // (fixed) naming convention to be used by dhtmlxscheduler
public string end_date; // (fixed) naming convention to be used by dhtmlxscheduler
public string URL;
public string Title;
}
(Web service) Return list of events:
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
[WebMethod(Description = "Return Events.")]
public List<MyEvent> GetData(string selectedMonth, string selectedYear)
{
List<MyEvent> calendarEvents = new List<MyEvent>();
// sample of single event to return
MyEvent calendarEventDetails = new MyEvent();
calendarEventDetails.Id = "1";
calendarEventDetails.RefNo = "#1";
calendarEventDetails.text = "Sample Event";
calendarEventDetails.CssClass = "myCssClass";
calendarEventDetails.start_date = "12/12/2012 12:12";
calendarEventDetails.end_date = "12/21/2012 12:12";
calendarEventDetails.URL = "ViewPage.aspx?Id=" + calendarEventDetails.Id;
calendarEventDetails.Title = "Sample Event Title";
// add to list
calendarEvents.Add(calendarEventDetails);
// return list
return calendarEvents;
}
Know more about DHTMLX Scheduler
