asp.net MVC实现Fullcalendar增删改的功能遇到的问题（包括datetimepicker冲突）

     最近使用了一下FullCalendar插件实现日程内容的管理，网上搜了很多的案例，功能比较强大，也比较全，但是很多功能都是基于PHP基础上完整的一些案例，所以在自己尝试使用asp.net  MVC 实现功能的时候遇到很多问题，比如弹出层内容的展示，控件的展示之类的（像后台进行ajax 传递数据这些还是比较简单的，不再进行叙述）。

  1、 fancybox弹出层展示一些基本功能的添加和编辑等功能：在一些网上的案例中很多都是直接链接到do.php之类的直接进行处理，在MVC 中可以模仿着直接连接到一个完整的页面 $.fancybox({

                        'type': 'ajax',

                        'href':  "/FancyBoxEdit/Index?editID=" + calEvent.id ,

                    });同时可以进行传递数据。

2、由于是链接到FancyBoxEdit这个页面的，在使用datetimepicker控件的时候，因为这是一个fancybox“导航到的独立的一个界面”“”，但是有一点需要注意的是，虽然界面是独立的，但是它也是通过fancybox导航链接过来的，很多的 <script src="~/Scripts/FullCalendar/jquery-1.9.1.min.js"></script>像类似于这种js 就不能再引用了，引用相同的版本或者不相同的版本都会导致fancybox不能进行正常的使用。所以很多基于jquery的datetimepicker控件是不能使用的，笔者是尝试了十几种这种控件都是不能使用的，要么就是会有一些bug要么就是这些那些的问题。最后是通过bootstarp中的一个datetimepicker解决了这个冲突问题。但是只引用了

      <link href="~/Content/FullCalendar/bootstrap.min.css" rel="stylesheet" />

      <link href="~/Content/FullCalendar/bootstrap-datetimepicker.css" rel="stylesheet" />

      <link href="~/Content/FullCalendar/bootstrap-datetimepicker.min.css" rel="stylesheet" />

       <script src="~/Scripts/FullCalendar/bootstrap.min.js"></script>

        <script src="~/Scripts/FullCalendar/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>

        <script src="~/Scripts/FullCalendar/bootstrap-datetimepicker.fr.js"></script>

这些样式，没有进行引用 <script src="~/Scripts/FullCalendar/jquery-1.9.1.min.js"></script>这个样式，因为这个样式fancybox会将父类中引用的传递过来直接进行引用。（笔者这样认为的，通过测试猜测的，不一定属实，但是冲突肯定是存在的）

3、进行数据展示时也出现一些问题：这里直接附一些返回的Json格式的数据，并进行相应的处理进行日程数据的展示：

//数据库返回的数据源

 public JsonResult SearchJsonData()

        {

            RJKJ.BLL.bim.FullCalendar fc = new RJKJ.BLL.bim.FullCalendar();

            List<RJKJ.Model.FullCalendar> fcModel = new List<RJKJ.Model.FullCalendar>();

            

            DataSet ds=fc.GetList("");

            foreach (DataRow item in ds.Tables[0].Rows)

            {

                RJKJ.Model.FullCalendar fcM = new RJKJ.Model.FullCalendar();

                fcM.ID = Convert.ToInt32(item["ID"]);

                fcM.Title = Convert.ToString(item["Title"]);

                fcM.StartTime = Convert.ToString(item["StartTime"]);

                fcM.EndTime = Convert.ToString(item["EndTime"]);

                fcM.AllDay = Convert.ToInt32(item["AllDay"]);

                fcM.Color= Convert.ToString(item["Color"]);

                fcM.UserID = Convert.ToString(item["UserID"]);

                fcModel.Add(fcM);

            }

            return Json(new { data = fcModel });

        }

//进行数据的展示：

  $('#calendar').fullCalendar({

                header: {

                    left: 'prev,next today',

                    center: 'title',

                    right: 'month,agendaWeek,agendaDay'

                },

                firstDay: 1,

                editable: false,//是否可拖拽显示的日程

                events: function (start, end, callback) {

                    $.ajax({

                        type: "POST",

                        dataType: "Json",

                        url: "/Fullcalendar/SearchJsonData",

                        data: {

                            timeStart: $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss"),

                            timeEnd: $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss")

                        },

                        success: function (JsonResult) {

                            var events = [];

                            for (var i = 0; i < JsonResult.data.length; i++) {

                                events.push({

                                    id: JsonResult.data[i].ID,

                                    title: JsonResult.data[i].Title,

                                    start: new Date(Date.parse(JsonResult.data[i].StartTime)),

                                    end: new Date(Date.parse(JsonResult.data[i].EndTime)),

                                    allDay: JsonResult.data[i].AllDay,

                                    color: JsonResult.data[i].color

                                });

                            }   

                            callback(events);

                        },

                    });

                },

                dayClick: function (date, allDay, jsEvent, view) {

                    var selDate = $.fullCalendar.formatDate(date, 'yyyy-mm-dd');

                    $.fancybox({

                        //调用弹出层

                        type: "ajax",

                        href: "/FancyBox/Index?operate='add'&&date=" + date +  "&&time=" + new Date().getTime(),

                    });

                },

                eventClick: function (calEvent, jsEvent, view) {

                    $.fancybox({

                        'type': 'ajax',

                        'href':  "/FancyBoxEdit/Index?editID=" + calEvent.id ,

                    });

                }

            });