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

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

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

环境：SQL 2008 +VS2012

1.首先创建数据库：

两个表Users和dutyplay

Users:

dutyplay:

 

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

在Users表里创建几个用户：

2.创建WEB工程：

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

引入FullCalendar插件

    <link href="./assets/main.min.css" rel="stylesheet"/>

    <script src="./assets/main.min.js">script>

    <script src="./assets/jquery.min.js">script>

    <script src="./assets/locales/zh-cn.js">script>

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

    <div style="float:left;">

        

         <div id="duty-config" style="/*width:880px;*/height:703px;overflow:auto;">

             <div id='wrap'>

                 <div id='external-events' style="margin-left: 300px;">

                    <h4 style="text-align:center;">值班员h4>

                

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

                             <ItemTemplate>

                                     <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'><div class='fc-event-main'><%# Eval("UserName") %>div>                                  div>

                             ItemTemplate>

                       asp:Repeater>

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

                  

               div>                  

           div>

         div>

    div>

写入显示FullCalendar日历的地方：

    <div id='calendar-container'>

      <div id='calendar'>div>

    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'就可以。