How to use JQuery fullcalender in asp.net

This snippet will show how how to use Jquery full calendar in asp.net

Open Microsoft Visual Studio. NET. In Visual C# .NET, create a new website named Fullcalender.Add following code to Default.aspx page.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FullCalender.aspx.cs" Inherits="FullCalender" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  <script src="Scripts/fullcalendar.js" type="text/javascript"></script>
  <script src="Scripts/gcal.js" type="text/javascript"></script>
  <link href="Styles/fullcalendar.css" rel="stylesheet" type="text/css" />
  <script src="Scripts/json2.js" type="text/javascript"></script>
  <script type="text/javascript" language="javascript">
      $(document).ready(function () {
          $('#calendar').fullCalendar({
              header: {
                  left: 'prev,next,today',
                  center: 'title',
                  right: 'month,basicWeek,basicDay'
              },
              events: "FullCalender.asmx/EventList"
              // events: [{ title: 'event1', start: '2010-06-01' }, { title: 'event2', start: '2010-06-05', end: '2010-06-07'}]
          });
      });
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div id="calendar">
  </div>
  </form>
</body>
</html>

Create a WebService in existing project named FullCalender.asmx and add following code to

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Summary description for FullCalender
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class FullCalender : System.Web.Services.WebService
{

   public FullCalender()
   {

   }

   [WebMethod]
   [System.Web.Script.Services.ScriptMethod]
   public string EventList(double startDate, double endDate)
   {
       var eventList = from e in new Events().GetAll()
                       select new
                       {
                           id = e.Id,
                           title = e.Title,
                           start = e.StartDate.ToString("s"),
                           end = e.EndDate.ToString("s"),
                           url = e.Url

                       };

       System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
       return js.Serialize(eventList);
   }

}
public class Events
{

   public int Id { get; set; }
   public string Title { get; set; }
   public DateTime StartDate { get; set; }
   public DateTime EndDate { get; set; }
   public string Url { get; set; }

   public List<Events> GetAll()
   {
       List<Events> lists = new List<Events>()
       {
           new Events{Id=1,StartDate=DateTime.Now,EndDate=DateTime.Now.AddDays(-1),Title="Client Call",Url="http://aspdotnetcodebook.blogspot.com"},
           new Events{Id=2,StartDate=DateTime.Now.AddDays(-5),EndDate=DateTime.Now.AddDays(-4),Title="Meeting with CEO",Url="http://aspdotnetcodebook.blogspot.com"},
           new Events{Id=3,StartDate=DateTime.Now.AddDays(-10),EndDate=DateTime.Now.AddDays(-9),Title="Travel Abroad",Url="http://aspdotnetcodebook.blogspot.com"},
       };
       return lists;


   }


   private static DateTime ConvertFromUnixTimestamp(double timestamp)
   {

       var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);

       return origin.AddSeconds(timestamp);

   }

}

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru