ASP.NET (AJAX) 中的 Google 日历

• 下载演示 - 34.26 KB
• 下载数据库 - 572 B

引言

如果您拥有 Gmail 帐户，您可以访问和使用 Google 日历，在其中添加、更新和删除事件。您还可以将事件从一个日期拖放到另一个日期。还有一个调整事件大小的功能。

现在，我尝试利用 AJAX 实现大部分功能。当您在 Google 日历中添加事件时，它会显示一个类似于工具提示的窗口，您可以在其中添加或删除事件，而我在这里打开了一个新窗口来添加事件。

在我的代码中，您还可以设置事件的背景颜色。

它是如何工作的？

• 新建事件：按住鼠标并向下拖动
• 移动事件：按住鼠标并拖动事件顶部
• 调整事件大小：按住鼠标并拖动事件底部
• 编辑事件：双击事件中间，等待弹出新窗口
• 删除事件：单击事件，然后按键盘上的删除键，或单击左上角的关闭按钮

Using the Code

您只需要在 SQL Server 上创建一个数据库，并在 zip 格式的文档中运行附带的 SQL 查询。根据您的需要，在应用程序的 web.config 文件中更改连接字符串。

HTML 代码

日历中的默认时间设置是 HH:MM AM/PM 格式。如果您想将时间设置为 24 小时格式，请阅读以下代码。在 Calender.aspx 页面中进行以下更改。

    <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>
          
  <%
            } %>
  
  </div>

C# 代码

如果您想设置日历中的开始和结束小时数，请修改以下代码。修改 startHourOfWeekPlanner 和 endHourOfWeekPlanner 全局变量。您可以在 Calendar.aspx 页面中找到此代码。

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代码

以下代码在 body load 事件中调用。您可以在 new-Cal.js 文件中找到该代码。

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();  
    }
}

在上述脚本中，函数 schedulerMouseMove 在 mousemove 事件中调用，cancelSelectionEvent 在 selectstart 事件中调用，schedulerMouseUp 在 mouseup 事件中调用，而 schedulerKeyboardEvent 在 keydown 事件中调用。

兼容浏览器

我已在以下浏览器上测试了该应用程序：Internet Explorer 7、Firefox 2.0.0.20。

历史

• 首次版本上传于 2009 年 3 月 8 日