[置顶] Ext.Net 1.x_Ext.Net.Calendar日程管理
案列由网友上下左右提供!
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="WorkDiary_Default" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 id="Head1" runat="server">
<title>Calendar - Ext.NET Examples</title>
<ext:ResourcePlaceHolder runat="server" Mode="Style" />
<link rel="stylesheet" type="text/css" href="Style/Calendar.Css" />
<ext:ResourcePlaceHolder runat="server" Mode="Script" />
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/kindeditor-4.1/kindeditor-min.js" type="text/javascript"></script>
<link href="Scripts/kindeditor-4.1/themes/default/default.css" rel="stylesheet"
type="text/css" />
<style type="text/css">
.ext-color-4, .ext-ie .ext-color-4-ad, .ext-opera .ext-color-4-ad
{
color: #7F0000;
}
.ext-cal-day-col .ext-color-4, .ext-dd-drag-proxy .ext-color-4, .ext-color-4-ad, .ext-color-4-ad .ext-cal-evm, .ext-color-4 .ext-cal-picker-icon, .ext-color-4-x dl, .ext-color-4-x .ext-cal-evb
{
background: #7F0000;
}
.ext-color-4-x .ext-cal-evb, .ext-color-4-x dl
{
border-color: #7C3939;
}
.icon-combo-item
{
background-repeat: no-repeat !important;
background-position: 3px 50% !important;
padding-left: 24px !important;
}
</style>
<script language="javascript" type="text/javascript">
var editor;
KindEditor.ready(function (K) {
editor = K.create('.txtArr', {
width: '470px',
height: '200px',
fullscreenShortcut: false,
newlineTag: '</br>',
resizeType: 0,
allowPreviewEmoticons: false,
allowImageUpload: false,
items: [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'link']
});
});
var checkForm = function (form) {
if (form.form.isValid())
return true;
Ext.Msg.alert('验证失败', '请检查被标记红色浪线的数据是否正确');
return false;
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager runat="server" IDMode="Explicit" ScriptMode="Debug" RemoveViewState="true"
Namespace="CompanyX" ID="ResourceManager1" />
<ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="iconCls" />
<ext:RecordField Name="name" />
<ext:RecordField Name="value" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:Store ID="stYuanGong" runat="server" OnRefreshData="MyData_Refresh">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="id" />
<ext:RecordField Name="UserName" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport runat="server" Layout="Border">
<Items>
<ext:Panel ID="Panel1" runat="server" Title="" Layout="Border" Region="Center" Border="false"
Cls="app-center">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Label ID="Label1" runat="server">
</ext:Label>
<ext:ToolbarFill>
</ext:ToolbarFill>
<ext:ComboBox LabelAlign="Right" StoreID="stYuanGong" ValueField="id" DisplayField="UserName"
Width="287" ID="drpXiangMuJL" runat="server" FieldLabel="选择人员" Editable="false">
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
</Triggers>
<Listeners>
<BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
<TriggerClick Handler="if (index == 0) { this.focus().clearValue(); trigger.hide();}" />
<Select Handler="this.triggers[0].show();" />
</Listeners>
</ext:ComboBox>
<ext:Button ID="Button4" runat="server" Text="确定" Icon="Zoom">
<DirectEvents>
<Click OnEvent="searchEvent">
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server" Region="Center" ActiveIndex="2"
ShowDayView="false" ShowWeekView="false" Border="false" AutoRender="false" MonthText="月视图">
<GroupStore ID="GroupStore1" runat="server">
<Groups>
<ext:Group CalendarId="1" Title="Home" />
<ext:Group CalendarId="2" Title="Work" />
<ext:Group CalendarId="3" Title="Other" />
<ext:Group CalendarId="4" Title="School" />
</Groups>
</GroupStore>
<EventStore ID="EventStore1" DateFormat="M$" runat="server" SaveMappings="false" OnRefreshData="MyData_Refresh">
<Reader>
</Reader>
</EventStore>
<MonthView runat="server" ShowHeader="true" ShowWeekLinks="true" ShowWeekNumbers="true" />
<DirectEvents>
<DayClick OnEvent="dayclick">
<ExtraParams>
<ext:Parameter Name="nnd" Mode="Raw" Value="dt">
</ext:Parameter>
</ExtraParams>
</DayClick>
<RangeSelect OnEvent="rangeSelect">
<ExtraParams>
<ext:Parameter Name="nnd" Mode="Raw" Value="dates ">
</ext:Parameter>
</ExtraParams>
</RangeSelect>
<EventClick OnEvent="editEvents">
<ExtraParams>
<ext:Parameter Name="ids" Mode="Raw" Value="record.data.EventId">
</ext:Parameter>
<ext:Parameter Name="Title" Mode="Raw" Value="record.data.Title">
</ext:Parameter>
<ext:Parameter Name="startday" Mode="Raw" Value="record.data.StartDate">
</ext:Parameter>
<ext:Parameter Name="endday" Mode="Raw" Value="record.data.EndDate">
</ext:Parameter>
<ext:Parameter Name="contens" Mode="Raw" Value="record.data.Notes">
</ext:Parameter>
</ExtraParams>
</EventClick>
<EventMove OnEvent="MoveEvents">
<ExtraParams>
<ext:Parameter Name="ids" Mode="Raw" Value="record.data.EventId">
</ext:Parameter>
<ext:Parameter Name="edate" Mode="Raw" Value="record.data.StartDate.format('F j' + (record.data.IsAllDay ? '' : ''))">
</ext:Parameter>
</ExtraParams>
</EventMove>
</DirectEvents>
</ext:CalendarPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:Window ID="Window1" runat="server" Collapsible="true" Height="390" Icon="Application"
Title="Title" Width="550" Hidden="true" Resizable="false" BodyStyle="background:#CCD9E8">
<Items>
<ext:FormPanel Border="false" Width="500" AutoWidth="false" ID="FormPanel1" runat="server"
MonitorValid="true" BodyStyle="background:#CCD9E8">
<Items>
<ext:TableLayout ID="TableLayout1" runat="server" Columns="2" AnchorHorizontal="99%"
StyleSpec="margin-top:20px;">
<Cells>
<ext:Cell>
<ext:TextField Width="250" LabelAlign="Right" LabelWidth="70" ID="txtTianJiaR" runat="server"
FieldLabel="添加人" AllowBlank="false" BlankText="添加人" Disabled="true">
</ext:TextField>
</ext:Cell>
<ext:Cell>
<ext:ComboBox ID="selColor" runat="server" Width="250" Editable="false" FieldLabel="设置颜色"
LabelAlign="Right" LabelWidth="70" DisplayField="name" ValueField="value" Mode="Local"
TriggerAction="All" EmptyText="请设置颜色" StoreID="Store1" SelectedIndex="0">
<Template ID="Template1" runat="server">
<Html>
<tpl for=".">
<div class="x-combo-list-item icon-combo-item " style="background:{iconCls};color:#fff;">
{name}
</div>
</tpl>
</Html>
</Template>
</ext:ComboBox>
</ext:Cell>
<ext:Cell>
<ext:DateField LabelAlign="Right" ID="startdate" LabelWidth="70" Width="250" FieldLabel="开始时间"
runat="server">
</ext:DateField>
</ext:Cell>
<ext:Cell>
<ext:DateField LabelAlign="Right" ID="enddate" LabelWidth="70" Width="250" FieldLabel="结束时间"
runat="server">
</ext:DateField>
</ext:Cell>
<ext:Cell ColSpan="2">
<ext:TextField Width="500" LabelAlign="Right" LabelWidth="70" ID="txtBiaoTi" runat="server"
FieldLabel="日程标题" AllowBlank="false" BlankText="日程标题必须填写">
</ext:TextField>
</ext:Cell>
<ext:Cell ColSpan="2">
<ext:Panel LabelAlign="Right" ID="Panel2" LabelWidth="70" FieldLabel="日程内容" runat="server"
Border="false" Width="500">
<Content>
<textarea id="txtBeiZhu" runat="server" class="txtArr"></textarea>
<ext:TextField ID="txtBeiZhuH" Hidden="true" runat="server" />
</Content>
</ext:Panel>
</ext:Cell>
<ext:Cell ColSpan="2">
<ext:TextField ID="hideid" Text="" runat="server" Hidden="true" />
</ext:Cell>
</Cells>
</ext:TableLayout>
</Items>
</ext:FormPanel>
</Items>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server" Height="40">
<Items>
<ext:Button ID="Button1" runat="server" Text="保存" Icon="Disk" StyleSpec="margin-left:220px;margin-top:10px;">
<DirectEvents>
<Click OnEvent="AddRiCheng" Before="return checkForm(#{FormPanel1});">
<ExtraParams>
<ext:Parameter Name="txtBeiZhu" Value="KindEditor.instances[0].html()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="保存修改" Icon="DiskEdit" StyleSpec="margin-left:220px;margin-top:10px;">
<DirectEvents>
<Click OnEvent="EditRiCheng" Before="return checkForm(#{FormPanel1});">
<ExtraParams>
<ext:Parameter Name="txtBeiZhu" Value="KindEditor.instances[0].html()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="删除" Icon="Delete" StyleSpec="margin-top:10px;">
<DirectEvents>
<Click OnEvent="DeleteRiCheng" Before="return checkForm(#{FormPanel1});" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Window>
</form>
</body>
</html>
CS:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Ext.Net;
using System.Text.RegularExpressions;
/// <summary>
//使用了Ext.Net1.1控件，如有不明白可联系QQ:44625518讨论，注明Ext.net; ExtJS我不会的
//小弟也初学，发现很多人都需要日程管理系统，可官网的Demo拿来后不好用，所以就简单修改了下
//放弃了官网Demo中 EventEditWindow编辑查看项，自己布置了个Window,所有操作都已实现，
//如需要 周视图，日视图，那就看官网Demo即可!
//使用了kingEditor编辑器
//个别电脑会出现错误，估计是 EventStore的问题。中间有个 DateFormat="M$" 属性， 移除或者加上就可以解决，应该是时间格式的问题
//大家有好的Demo别忘记上传啊！！！我也学学啦！！
//正研究工作流中，发现好麻烦！！
//Add_Code为数据库文件，Sql2005
//用户简单的分配了一下， 登陆后根据Session判断，只能修改删除自己的日程，其他帐号的日程记录只可查看，不可编辑删除
//别的没什么问题了，应该拿去好用的，我发布到服务器后也没问题
//这个只是个Demo！还有很多重复操作及代码很臃肿，可以简化到很少的，没时间搞了，应朋友要求发出来的，需要的朋友自己改改就好了，很好改
/// </summary>
public partial class WorkDiary_Default : System.Web.UI.Page
{
public static string whereSt = "";//查询条件,用户姓名。默认为登陆名，如选择Combox 则为选择人员姓名
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Session["UserName"] == null)
{
X.Msg.Alert("提示！", "登陆时间超时，请重新登陆！").Show();
Response.Redirect("Login.aspx");
}
whereSt = Session["UserName"].ToString();
txtTianJiaR.Text = Session["UserName"].ToString();
this.Label1.Text = DateTime.Now.ToString("yyyy-MM-dd");
}
if (!X.IsAjaxRequest)
{
this.BindData("");
ColorBingd();
}
}
#region ajax刷新操作,重新绑定表格数据
protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
{
this.BindData("");
}
#endregion
#region 查询其他人员日程
public void searchEvent(object sender, DirectEventArgs e)
{
//设置查询人员姓名
if (drpXiangMuJL.SelectedItem.Text.ToString() != "")
{
whereSt = drpXiangMuJL.SelectedItem.Text.ToString();
}
else
{
whereSt = Session["UserName"].ToString();
}
// 设置修改按钮的显示与否
if (whereSt != Session["UserName"].ToString())
{
Button2.Disabled = true;
Button3.Disabled = true;
}
else
{
Button2.Disabled = false;
Button3.Disabled = false;
}
BindData("");
}
#endregion
#region 绑定sort数据
private void BindData(string strwhere)
{
this.CalendarPanel1.EventStore.Events.AddRange(Events);
this.CalendarPanel1.EventStore.DataBind();
DataTable yhDT = DbHelperSQL.Query("select * from [user] where acstate='在职'").Tables[0];
stYuanGong.DataSource = yhDT;
stYuanGong.DataBind();
}
#endregion
#region 单日日程添加
public void dayclick(object sender, DirectEventArgs e)
{
if (whereSt != Session["UserName"].ToString())
{
X.Msg.Alert("提示", "当前查看项与登陆人员姓名不符合，不能添加日程。\n请清除搜索框内的文本后，进行添加。").Show();
return;
}
Window1.Title = "添加新日程：单日日程";
this.txtBiaoTi.Text = "";
this.txtBeiZhuH.Text = "";
X.AddScript("KindEditor.instances[0].html(Ext.getCmp(\"txtBeiZhuH\").getValue());");
var startday = e.ExtraParams[0].Value.ToString().Split(new char[] { 'T' });
this.startdate.Text = startday[0];
this.enddate.Text = startday[0];
this.enddate.Disabled = true;
this.startdate.Disabled = true;
this.Button1.Show();
this.Button2.Hide();
this.Button3.Hide();
Window1.Show();
}
#endregion
#region 添加多日日程，滑动选择
public void rangeSelect(object sender, DirectEventArgs e)
{
if (whereSt != Session["UserName"].ToString())
{
X.Msg.Alert("提示", "当前查看项与登陆人员姓名不符合，不能添加日程。\n请清除搜索框内的文本后，进行添加。").Show();
return;
}
Window1.Title = "添加新日程：多日日程";
this.txtBiaoTi.Text = "";
this.txtBeiZhuH.Text = "";
X.AddScript("KindEditor.instances[0].html(Ext.getCmp(\"txtBeiZhuH\").getValue());");
Regex R = new Regex(@"\d{4}\-\d{2}\-\d{2}", RegexOptions.IgnoreCase);
var T = R.Matches(e.ExtraParams[0].Value.ToString());
string startdate = T[0].Value.ToString();
string enddate = T[1].Value.ToString();
this.startdate.Text = startdate;
this.enddate.Text = enddate;
this.enddate.Disabled = true;
this.startdate.Disabled = true;
Window1.Show();
}
#endregion
#region 修改日程
public void editEvents(object sender, DirectEventArgs e)
{
Window1.Title = "修改日程";
int editid = int.Parse(e.ExtraParams[0].Value.ToString());
string title = e.ExtraParams[1].Value.ToString();
string startday = e.ExtraParams[2].Value.ToString();
string endday = e.ExtraParams[3].Value.ToString();
string contents = e.ExtraParams[4].Value.ToString();
txtBeiZhuH.Text = contents;
this.hideid.Text = editid.ToString(); ;
this.txtBiaoTi.Text = title;
this.startdate.Text = startday;
this.enddate.Text = endday;
this.txtBeiZhu.Value = contents;
this.Button1.Hide();
Button2.Show();
Button3.Show();
X.AddScript("KindEditor.instances[0].html(Ext.getCmp(\"txtBeiZhuH\").getValue());");
Window1.Show();
}
#endregion
#region 移动日程
public void MoveEvents(object sender, DirectEventArgs e)
{
if (whereSt != Session["UserName"].ToString())
{
X.Msg.Alert("提示", "当前查看项与登陆人员姓名不符合，不能移动日程。\n请清除搜索框内的文本后，进行添加。").Show();
return;
}
int id = int.Parse(e.ExtraParams[0].Value.ToString());
string updateDay = DateTime.Parse(e.ExtraParams[1].Value.ToString()).ToString("yyyy-MM-dd");
string updateSql = "update RiCheng Set startday='" + updateDay + "',endday='" + updateDay + "' where id=" + id + "";
DbHelperSQL.Query(updateSql);
BindData("");
}
#endregion
#region 保存修改日程
public void EditRiCheng(object sender, DirectEventArgs e)
{
int id = int.Parse(this.hideid.Text);
string TianJiaR = this.txtTianJiaR.Text;
string BiaoTi = this.txtBiaoTi.Text;
string NeiRong = e.ExtraParams[0].Value.ToString();
string KaiShiSJ = this.startdate.Text;
string JieShuSJ = this.enddate.Text;
int YanSeID = int.Parse(this.selColor.SelectedItem.Value);
string updateSql = "update richeng set title='" + BiaoTi + "',contents='" + NeiRong + "',startday='" + KaiShiSJ + "',endday='" + JieShuSJ + "',colorid='" + YanSeID + "',added='" + TianJiaR + "' where id=" + id + "";
DbHelperSQL.Query(updateSql);
X.Msg.Alert("提示", "修改成功").Show();
Window1.Hide();
BindData("");
}
#endregion
#region 删除日程
public void DeleteRiCheng(object sender, DirectEventArgs e)
{
int id = int.Parse(this.hideid.Text);
string DeleteSql = "delete RiCheng where id=" + id;
DbHelperSQL.Query(DeleteSql);
Window1.Hide();
X.Msg.Alert("提示", "删除成功").Show();
BindData("");
}
#endregion
#region 添加保存日程
public void AddRiCheng(object sender, DirectEventArgs e)
{
string TianJiaR = "";
if (Session["UserName"] != null)
{
TianJiaR = Session["UserName"].ToString();
}
string BiaoTi = this.txtBiaoTi.Text;
string NeiRong = e.ExtraParams[0].Value.ToString();
string KaiShiSJ = this.startdate.Text;
string JieShuSJ = this.enddate.Text;
int YanSeID = int.Parse(this.selColor.SelectedItem.Value);
string insertSql = "insert into richeng(title,contents,startday,endday,colorid,added)values('" + BiaoTi + "','" + NeiRong + "','" + KaiShiSJ + "','" + JieShuSJ + "'," + YanSeID + ",'" + TianJiaR + "')";
DbHelperSQL.Query(insertSql);
X.Msg.Alert("提示", "添加成功").Show();
BindData("");
Window1.Hide();
}
#endregion
#region 数据源
//设置颜色选取
private void ColorBingd()
{
this.Store1.DataSource = new object[]
{
new object[] { "#306DA6", "深蓝",1},
new object[] { "#86A723", "草绿",2},
new object[] { "#B6A980", "浅棕",3},
new object[] { "#7F0000", "酒红",4},
};
this.Store1.DataBind();
}
//数据库查询,读取日程记录
public EventCollection Events
{
get
{
var now = DateTime.Now.Date;
var d = DbHelperSQL.Query("select * from richeng where added='" + whereSt + "'");
var E = new EventCollection();
foreach (System.Data.DataRow item in d.Tables[0].Rows)
{
E.Add(new Event
{
EventId = int.Parse(item["id"].ToString()),
CalendarId = int.Parse(item["ColorId"].ToString()),
Title = item["Title"].ToString(),
StartDate = DateTime.Parse(item["StartDay"].ToString()),
EndDate = DateTime.Parse(item["EndDay"].ToString()).AddDays(1).AddSeconds(-1),
IsAllDay = true,
Notes = item["Contents"].ToString()
});
}
return E;
}
}
#endregion
}
效果:
![[置顶] Ext.Net 1.x_Ext.Net.Calendar日程管理_第1张图片](http://img.e-com-net.com/image/info5/abc692c4cbf74d979068783386a8dd3d.jpg)