FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班（二）

lanhai96

已于 2022-08-03 13:26:18 修改

阅读量449

点赞数

分类专栏：老程序员学CSharp 文章标签： asp.net 后端

于 2022-08-03 13:15:49 首次发布

本文链接：https://blog.csdn.net/lanhai96/article/details/126138367

版权

老程序员学CSharp 专栏收录该内容

13 篇文章 4 订阅

订阅专栏

FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班

（二）c# asp.net 操作FullCalendarDemo5连接数据库

环境：SQL 2008 +VS2012

1.首先创建数据库：

两个表Users和dutyplay

Users:

dutyplay:

这里有几个字段是多余的，实际项目中需要，Demo中不是全部需要。

在Users表里创建几个用户：

2.创建WEB工程：

在VS2012中，新建工程，创建代码如下：

引入FullCalendar插件

拖拽对象部分，是绑定了数据库的所有用户名，也就是所谓的值班员

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">

</ItemTemplate>

</asp:Repeater>

<p style="text-align:center">拖拽即保存<br />单击即删除</p>

</div>

写入显示FullCalendar日历的地方：

</div>

配置调用FullCalendar的执行脚本：

document.addEventListener('DOMContentLoaded', function () {

var Calendar = FullCalendar.Calendar;

var containerEl = document.getElementById('external-events');

var calendarEl = document.getElementById('calendar');

var calendar = new Calendar(calendarEl, {

headerToolbar: {

left: 'prev,next today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay'

locale: 'zh-cn', //指定中文

editable: true,

eventOrder: 'order',//排序

events: [<%=jsonstr_start %>] //显示的值班表数据

});

calendar.render();

});

上面的脚本里面，使用jsonstr_start全局变量来接收已经排好的值班表数据，格式为JSON格式，示例如：

[{title:'刘德华',order:'1',start:'2022-08-01'},{title:'易烊千玺',order:'2',start:'2022-08-01'},{title:'刘亦菲',order:'3',start:'2022-08-02'},{title:'易烊千玺',order:'4',start:'2022-08-02'},{title:'郭富城',order:'5',start:'2022-08-03'},{title:'王祖贤',order:'6',start:'2022-08-03'}]

代码页面，从数据库获取用户已排好的值班表：

protected string jsonstr_start = "";//值班表数据变量

private void Get_Dutydata()

{

DBHelp db = new DBHelp();

string sqlstrstart = "SELECT dt.id,dt.dutydate,us.UserName FROM dutyplay as dt,Users as us where dt.userid=us.userid order by duty_time asc";

DataSet dsstart = db.GetDataSets(sqlstrstart);

int data_count = dsstart.Tables[0].Rows.Count;

if (data_count != 0)

{

for (int i = 0; i < data_count; i++)

{

string tmp = "{title:" + "'" + dsstart.Tables[0].Rows[i]["UserName"].ToString() + "'," + "order:'" + (i + 1) + "',start:'" + DateTime.Parse(dsstart.Tables[0].Rows[i][1].ToString()).ToString("yyyy-MM-dd") + "'}";//order属性用于指定排序

if (i != (data_count - 1))

{

jsonstr_start += tmp + ",";

}

else

{

jsonstr_start += tmp;

}

以上，就完成了值班数据的显示功能。

开发过程中的几个疑问：

（1）怎么实现日历的第一位是周一，而不是默认的周日？

插件默认是如下界面，第一位是SUN，而不是MON。其实这是英文版，改成中文版，第一位就是周一了。老版本里语言设置参数是lang:’zh-cn’。

（2）项目中，要求有代班员和值班员区分，一般代班员在上，值班员在下，怎么实现排序？

FullCalendar版本获取的人名排序默认是按照人名拼音的首字母大小进行排序，所以刘亦菲会一直显示王祖贤的前面。要实现指定的排序，通过eventOrder参数来实现，配置参数为‘order’，然后在数据获取的时候，指定自定义顺序的order值即可。该参数默认值是title，在FullCalendar v2.4.0版本下需要编写自定义函数，函数里配置排序规则，FullCalendar v5.11.2 版本下，直接指定 eventOrder: 'order'就可以。