Introduction
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.
HTML Code
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();
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>
<%
} %>
</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;
public int endHourOfWeekPlanner = 21;
public double date = 0;
public string time="";
public DateTime origin;
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++){
if(subDivs[no].className=='demo_appointHour'){
subDivs[no].onmousedown = initNewAppointment;
if(!SetnewAppointmentWidth)SetnewAppointmentWidth = subDivs[no].offsetWidth;
}
if(subDivs[no].className=='demo_appoint_day'){
dayPositionArr[dayPositionArr.length] = getLeftPos(subDivs[no]);
}
}
if(initilizeTopHours > CalenderStartHour)document.getElementById
('demo_cal_content').scrollTop = ((initilizeTopHours - CalenderStartHour)*
(itemRowHeight+1));
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);
tmpDate.setFullYear(dateItems[0]);
tmpDate.setDate(Number(dateItems[2])/1);
tmpDate.setMonth(Number(dateItems[1])/1-1);
tmpDate.setHours(1);
tmpDate.setMinutes(0);
tmpDate.setSeconds(0);
var day = tmpDate.getDay();
if(day==0)day=7;
if(day>1){
var time = tmpDate.getTime();
time = Number(time) - (1000*60*60*24) * (Number(day)-1);
tmpDate.setTime(time);
}
SetdateStartOfWeek = new Date(tmpDate);
updateTopHeadDates();
if(get_items_from_db){
getItemsFromDBServer();
}
}
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 2.0.0.20.
History
- First version uploaded on March-08-2009
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.