Using dhtmlx scheduler w/ jQuery and C# webservice (asmx)

Include all needed css and js files:

<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">&nbsp;</div>
    <div class="dhx_cal_next_button">&nbsp;</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