How to use Jquery fullcalender in asp.net

This snippet will show how how to use Jquery fullcalender 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
 webservice
 
 
 
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);

    }

}



 

2 comments:

  1. Hey Thank you buddy,I want to know how to insert data into the database to the corresponding date?

    ReplyDelete
  2. how to show birthdays in full calender from database using jquery ,can you help me?
    i want to show birthdays in calender.
    _
    Public Function EventList() As String
    Dim conn As SqlConnection = New SqlConnection
    conn.ConnectionString = ConfigurationManager _
    .ConnectionStrings(“ARBASHHRString”).ConnectionString
    conn.Open()
    Dim cmd As New SqlCommand(“select * from NewCus “, conn)
    Dim da As New SqlDataAdapter(cmd)
    Dim dt As New DataSet()
    da.Fill(dt)
    conn.Close()
    Dim events1 As IList(Of [Event2]) = New List(Of [Event2])()
    For i As Integer = 0 To dt.Tables(0).Rows.Count – 1
    Dim value As Event2 = New Event2()
    value.Cust_dob = Convert.ToDateTime(ToUnixTimespan(DateTime.Parse(dt.Tables(0).Rows(i)(“Cust_dob”).ToString())))
    ‘value.J_Date = DateTime.Parse(dt.Tables(0).Rows(i)(“J_Date”).ToString())
    value.Id = dt.Tables(0).Rows(i)(“Cust_ID”).ToString()
    value.title = dt.Tables(0).Rows(i)(“Cust_FNameE”).ToString()
    events1.Add(value)
    Next
    Dim oSerializer = New System.Web.Script.Serialization.JavaScriptSerializer()
    Dim sJSON As String = oSerializer.Serialize(events1)
    Return sJSON

    End Function

    javascript code ,

    $(document).ready(function () {
    $(‘#calendar’).fullCalendar({
    header: {
    left: ‘prev,next,today’,
    center: ‘title’,
    right: ‘month,basicWeek,basicDay’

    },
    events: “FullCalender.aspx/EventList”
    // events: “FullCalender.aspx/EventList”
    // events: [{ title: 'event1', start: '2010-06-01' }, { title: 'event2', start: '2010-06-05', end: '2010-06-07'}]
    });

    });

    ReplyDelete