Click here to Skip to main content
11,920,641 members (58,659 online)
Click here to Skip to main content
Add your own
alternative version


90 bookmarked

Google like Calendar in ASP.NET (AJAX)

, 8 Mar 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
This article describes how to manage events in calender.


If you have got a Gmail account, you can access and use the Google calendar where you can add, update and delete events. You can also drag and drop an event from one date to another. There is also a facility to resize the event.

Now I tried to cover most functionalities with the help of AJAX. When you add an event in Google calendar, it shows a window just like tool tip where you can add or delete an event and here I opened a new window to add an event.

You have also got a facility to set the background color of an event in my code.

How It Works?

  • New event: Hold your mouse down and drag down
  • Move event: Hold your mouse down at the top of an event and drag
  • Resize event: Hold your mouse down at the bottom of an event and drag
  • Edit event: Double click at the middle of an event and wait until a new popup appears
  • Delete event: Click on event and press delete key on your keyboard or click on close button top left corner

Using the Code

You just have to create a database on SQL Server and run the SQL query attached with the article in zip format. Change the connection string according to your convenience in the application's web.config file.


The default time settings in calendar are in HH:MM AM/PM format. If you want to set the time in 24 hour format, please read the following code. Make the following changes in Calender.aspx page.

  <div id="demo_cal_hours">
          string suffix="";
          string hour = "";

          for (int no = startHourOfWeekPlanner; no <= endHourOfWeekPlanner; no++)

              hour = no.ToString();
             // un-comment if you want to set the time in 24 hours format
             // suffix = "0";
             // comment the following 2 lines of code if you want to
        // set the timing in 24 hours
               suffix = origin.ToString("tt");
               hour = origin.ToString("hh");
              time = "<span style='font-size:16px;'>" + hour.ToString() +
      "</span>" + "<span class=\"content_hour\" >" + suffix + "</span>";
              origin = origin.AddMinutes(60);

        <div class="demoContentTime"><% Response.Write(time); %></div>

          } %>


C# Code

Make the changes in the following code if you want to set the start and end Hour in the calendar. Make changes in startHourOfWeekPlanner and endHourOfWeekPlanner global variables. You can get this code in Calendar.aspx page.

public int startHourOfWeekPlanner = 8; // Start hour of Calender
public int endHourOfWeekPlanner = 21;  // End hour of Calender.
public double date = 0;
public string time="";
public DateTime origin;
// The following code converts DateTime to Unix timestamp.
protected void Page_Load(object sender, EventArgs e)
    string dat = "1970-1-1";
    origin = new DateTime(DateTime.Now.Year, 
    DateTime.Now.Month, DateTime.Now.Day, 8, 0, 0, 0);
    TimeSpan diff = origin - Convert.ToDateTime(dat);
    date = Math.Floor(diff.TotalSeconds);

JavaScript Code

The following code is called on body load event. You can find the code in new-Cal.js file.

function initCalendar()
     demo_container = document.getElementById('demo_container');
     if(!document.all)demo_container.onclick = ffEndEdit;
     demo_cal_appointments = document.getElementById('demo_cal_appointments');
     var subDivs = demo_cal_appointments.getElementsByTagName('DIV');
     for(var no=0;no<subDivs.length;no++){
       subDivs[no].onmousedown = initNewAppointment;
       if(!SetnewAppointmentWidth)SetnewAppointmentWidth = subDivs[no].offsetWidth;
       dayPositionArr[dayPositionArr.length] = getLeftPos(subDivs[no]);
     if(initilizeTopHours > CalenderStartHour)document.getElementById
	('demo_cal_content').scrollTop = ((initilizeTopHours - CalenderStartHour)*
     SetappointmentsOffsetTop = getTopPos(demo_cal_appointments);
     SetappointmentsOffsetLeft = 2 - Number(appointMarginSize);
     document.documentElement.onmousemove = schedulerMouseMove;
     document.documentElement.onselectstart = cancelSelectionEvent;
     document.documentElement.onmouseup = schedulerMouseUp;
     document.documentElement.onkeydown = schedulerKeyboardEvent;
     var tmpDate = new Date();
     var dateItems = initDateToShow.split(/\-/g);
      var day = tmpDate.getDay();
       var time = tmpDate.getTime();
      time = Number(time) - (1000*60*60*24) * (Number(day)-1);
     SetdateStartOfWeek = new Date(tmpDate);

In the above script, function schedulerMouseMove is called on mousemove event, cancelSelectionEvent is called on selectstart event, schedulerMouseUp is called on mouseup event and schedulerKeyboardEvent is called on keydown event.

Compatible Browsers

I have tested the application on the following browsers: Internet Explorer 7, Firefox


  • First version uploaded on March-08-2009


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

CEO SL Soft Technologies
India India
SL-Soft Technologies provides e-business solutions and application management services to its various clients in India and abroad. Our expertise extends across a wide range of technologies encompassing Internet, E-Commerce, Data Warehousing, and Software Development. Our industry experience extends to providing solutions to several industries.

We believe in partnering with our clients for every solution we develop for them. Be it a Website Development, software development or any other assignment, we are always next to our clients. This gives us a unique opportunity to understand their business requirements and deliver them the solutions which fit the best in their needs. SL-Soft Technologies is on a continuous growth path ever since and has earned a clientele of highly satisfied customers. We are committed to set new horizons in client satisfaction.

You may also be interested in...

Comments and Discussions

QuestionHow to store Time and Date values in datetime datatype column Pin
yogesh318828-Jan-13 22:23
memberyogesh318828-Jan-13 22:23 
Current Database Schema:

id(int)     startdat(varchar(50))     enddat(varchar(50))

13    Tue, 29 Jan 2013 08:15:00 GMT     Tue, 29 Jan 2013 10:00:00 GMT

but i want this format :

id(int)    startdat(datetime))    enddat(datetime))

13    2013-01-29 13:45:20.197    2013-01-29 15:30:20.197
Thanks and Regards
Yogesh Sharma

QuestionNice! Pin
Dan Letecky19-Jun-12 12:27
memberDan Letecky19-Jun-12 12:27 
QuestionGoogle Like calender with Only Day view Pin
Jai.chow28-Jan-12 6:44
memberJai.chow28-Jan-12 6:44 
Questionit overlaps when two appointment at same time Pin
dharam112-Jan-12 0:20
memberdharam112-Jan-12 0:20 
GeneralAwesome work Pin
Member 83350683-Nov-11 2:48
memberMember 83350683-Nov-11 2:48 
QuestionGoogle Like Calendar in Asp.Net(Ajax) Pin
bharanisoft20-Jul-11 3:43
memberbharanisoft20-Jul-11 3:43 
GeneralHELP - How to close the popup event edit window when the mouse focus moves back to the parent calendar window Pin
ying xiao14-Jun-11 13:28
memberying xiao14-Jun-11 13:28 
GeneralI have few issues Pin
Vandana8710-Apr-11 23:05
memberVandana8710-Apr-11 23:05 
GeneralRe: I have few issues Pin
Lokesh_19374442-Jun-11 0:14
memberLokesh_19374442-Jun-11 0:14 
GeneralGood Pin
KatareRaju1-Mar-11 19:14
memberKatareRaju1-Mar-11 19:14 
GeneralNICE Pin
KatareRaju1-Mar-11 19:13
memberKatareRaju1-Mar-11 19:13 
GeneralI need help plsss Pin
yuyu1912-Jan-11 18:39
memberyuyu1912-Jan-11 18:39 
GeneralGOOD Pin
angxuan9-Jan-11 23:28
memberangxuan9-Jan-11 23:28 
GeneralMy vote of 4 Pin
abhi_jain16071-Oct-10 3:16
memberabhi_jain16071-Oct-10 3:16 
GeneralGreat Work! Pin
srkrishnakumar8-Sep-10 16:27
membersrkrishnakumar8-Sep-10 16:27 
GeneralDear Lokesh Great Job Done Pin
Milton_win12-Apr-10 11:23
memberMilton_win12-Apr-10 11:23 
QuestionI want to modified the calendar into single line, but I got a problem. Pin
amory62623-Jan-10 23:11
memberamory62623-Jan-10 23:11 
Questionlooks great but does not load the saved dates form db... Pin
Member 446876617-Dec-09 9:33
memberMember 446876617-Dec-09 9:33 
AnswerRe: looks great but does not load the saved dates form db... Pin
Lokesh_193744429-Dec-09 19:29
memberLokesh_193744429-Dec-09 19:29 
QuestionHow Event Fire when Schedule come ?? Pin
ketan d patel16-Dec-09 18:24
memberketan d patel16-Dec-09 18:24 
AnswerRe: How Event Fire when Schedule come ?? Pin
Lokesh_193744429-Dec-09 19:27
memberLokesh_193744429-Dec-09 19:27 
Questioncentered google calendar working wrong Pin
dolhaig6-Dec-09 1:17
memberdolhaig6-Dec-09 1:17 
AnswerRe: centered google calendar working wrong Pin
Lokesh_19374449-Dec-09 3:45
memberLokesh_19374449-Dec-09 3:45 
GeneralRe: centered google calendar working wrong Pin
dolhaig9-Dec-09 10:12
memberdolhaig9-Dec-09 10:12 
GeneralMsSql loading problem Pin
dolhaig5-Dec-09 3:14
memberdolhaig5-Dec-09 3:14 
Generalproblem in running Pin
indiaindia21-Oct-09 21:02
memberindiaindia21-Oct-09 21:02 
GeneralRe: problem in running Pin
Lokesh_193744422-Oct-09 19:47
memberLokesh_193744422-Oct-09 19:47 
GeneralWell done- it is working Pin
Siew Hwa1-Oct-09 1:20
memberSiew Hwa1-Oct-09 1:20 
GeneralRe: Well done- it is working Pin
Lokesh_193744422-Oct-09 19:49
memberLokesh_193744422-Oct-09 19:49 
Generali can't run it! Pin
Do Quang27-Sep-09 19:38
memberDo Quang27-Sep-09 19:38 
GeneralRe: i can't run it! Pin
Lokesh_193744422-Oct-09 19:44
memberLokesh_193744422-Oct-09 19:44 
GeneralIt's cool Pin
sanju417916-Mar-09 22:10
membersanju417916-Mar-09 22:10 
GeneralDouble click... Pin
Industria Virtual9-Mar-09 10:21
memberIndustria Virtual9-Mar-09 10:21 
GeneralRe: Double click... Pin
Lokesh_19374449-Mar-09 20:26
memberLokesh_19374449-Mar-09 20:26 
GeneralRe: Double click... Pin
Industria Virtual11-Mar-09 2:36
memberIndustria Virtual11-Mar-09 2:36 
GeneralRe: Double click... Pin
Member 461003530-Mar-09 12:54
memberMember 461003530-Mar-09 12:54 
GeneralRe: Double click... Pin
Member 461003530-Mar-09 13:10
memberMember 461003530-Mar-09 13:10 
GeneralGood Job Pin
Member 15911279-Mar-09 9:49
memberMember 15911279-Mar-09 9:49 
GeneralRe: Good Job Pin
Lokesh_19374449-Mar-09 20:29
memberLokesh_19374449-Mar-09 20:29 
GeneralExcellent Pin
akhilendu9-Mar-09 4:41
memberakhilendu9-Mar-09 4:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151120.1 | Last Updated 8 Mar 2009
Article Copyright 2009 by Lokesh_1937444
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid