使用JSON将事件映射到FullCalendar [英] Mapping Events to FullCalendar using JSON

查看:159
本文介绍了使用JSON将事件映射到FullCalendar的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

目前处理jquery fullcalendar,我无法从后面的代码中添加事件。



我已经尝试了所有这些可能的解决方案但没有他们为我工作:




  • 解决方案

    在三天的挣扎之后,我让它工作!我添加了来自数据库的事件以添加到jquery fullcalender。这就解决了我的问题!这是我的代码



    我的html和javascript代码

     < ! - 主要内容 - > 
    < section class =content>
    < div class =row>
    < div class =col-md-3>
    < div class =box box-solid>
    < div class =box-header with-border>
    < h4 class =box-title>可拖动事件< / h4>
    < / div>
    < div class =box-body>
    <! - 事件 - >
    < div id =external-events>


    < div runat =serverid =check>

    < / div>



    < div class =checkbox>
    < label for =drop-remove>
    < input type =checkboxid =drop-remove>
    < / label>后删除

    < / div>
    < / div>
    < / div>
    <! - /.box-body - >
    < / div>
    < ;! - /。框 - >
    < div class =box box-solid>
    < div class =box-header with-border>
    < h3 class =box-title>创建活动< / h3>
    < / div>
    < div class =box-body>
    < div class =btn-groupstyle =width:100%; margin-bottom:10px;>
    <! - < button type =buttonid =color-chooser-btnclass =btn btn-info btn-block dropdown-toggledata-toggle =dropdown> Color < span class =caret>< / span>< / button> - >
    < ul class =fc-color-pickerid =color-chooser>
    < li>< a class =text-aquahref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-bluehref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-light-bluehref =#>< i class =fa fa-square>< / i>< / a> < /锂>
    < li>< a class =text-tealhref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-yellowhref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-orangehref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-greenhref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-limehref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-redhref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-purplehref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-fuchsiahref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-mutedhref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < li>< a class =text-navyhref =#>< i class =fa fa-square>< / i>< / a>< /立GT;
    < / ul>
    < / div>
    <! - / btn-group - >
    < div class =input-group>
    < input id =new-eventtype =textclass =form-controlplaceholder =Event Title>

    < div class =input-group-btn>
    < button id =add-new-eventtype =buttonclass =btn btn-primary btn-flat>添加< / button>
    < / div>
    <! - / btn-group - >
    < / div>
    <! - / input-group - >
    < / div>
    < / div>

    < br />
    < button onclick =saveEvent();>保存< / button>
    < / div>
    <! - /.col - >
    < div class =col-md-9>
    < div class =box box-primary>
    < div class =box-body no-padding>
    <! - THE CALENDAR - >
    < div id =calendar>< / div>
    < / div>
    <! - /.box-body - >
    < / div>
    < ;! - /。框 - >
    < / div>
    <! - /.col - >
    < / div>
    <! - /.row - >
    < / section>
    <! - /.content - >

    < / ContentTemplate>

    < / asp:UpdatePanel>
    <! - jQuery 2.2.0 - >

    <! - 页面特定脚本 - >
    < script>
    var data2 =;
    var startDateFinal =;
    var endDateFinal =;
    var eventNameFinal =;

    $(function(){

    / *初始化外部事件
    ------------------ ----------------------------------------------- * /
    function ini_events(ele){
    ele.each(function(){

    //创建一个事件对象(http://arshaw.com/fullcalendar/docs/event_data/ Event_Object /)
    //它不需要有一个开头或结尾
    var eventObject = {
    title:$ .trim($(this).text())
    };



    //将事件对象存储在DOM元素中,以便我们以后可以使用
    $(this).data('eventObject' ,eventObject);

    //使用jQuery UI使事件可拖动
    $(this).draggable({
    zIndex:1070,
    revert:true,/ /将导致事件返回到
    revertDuration:0 //拖动
    后的原始位置});



    });
    }

    ini_events($('#external-events div.external-event'));

    / *初始化日历
    --------------------------------- -------------------------------- * /
    //日历事件的日期(虚拟数据)
    var date = new Date();
    var d = date.getDate(),
    m = date.getMonth(),
    y = date.getFullYear();
    $('#calendar')。fullCalendar({
    header:{
    left:'prev,next today',
    center:'title',
    right :'month,agendaWeek,agendaDay'
    },
    <% - events:{
    $ .ajax({
    type:POST,
    url :'<%= ResolveUrl(EmpHolidays.aspx / TestOnWebService)%>',
    data:{},
    contentType:application / json; charset = utf-8,
    dataType:json,
    成功:函数(doc){
    alert(成功);
    var events = [];
    alert(doc。 d);
    var obj = $ .parseJSON(doc.d);
    for(var i = 0; i< obj.length; i ++){


    标题:'全日活动',
    开始:新日期( y,m,1),
    backgroundColor:#f56954,// red
    borderColor:#f56954// red


    console.log( OBJ [I] [ 'ID']);
    console.log(obj [i] ['title']);
    console.log(obj [i] ['start']);
    console.log(obj [i] ['end']);
    }


    //$(obj.event).each(function() {
    // events.push({
    // id :$(this).attr('id'),
    // title:$(this).attr('title'),
    // start:$(this).attr('start '),
    //结束:$(this).attr('end'),
    // backgroundColor:#0073b7,
    // borderColor:#0073b7
    //});



    //});
    //回调(事件);
    callback&&回调(事件);
    },
    错误:函数(xhr,状态,错误){
    alert(xhr.responseText);
    }
    });
    事件:[
    {
    title:'All Day Event',
    start:new Date(y,m,1),
    backgroundColor:#f56954 ,// red
    borderColor:#f56954// red
    },
    {
    title:'Long Event',
    start:new Date(y, m,d - 5),
    end:new Date(y,m,d - 2),
    backgroundColor:#f39c12,// yellow
    borderColor:#f39c12/ /黄色
    },
    {
    标题:'会议',
    开始:新日期(y,m,d,10,30),
    allDay:false ,
    backgroundColor:#0073b7,//蓝色
    borderColor:#0073b7//蓝色
    },
    {
    标题:'午餐',
    start:new Date(y,m,d,12,0),
    end:new Date(y,m,d,14,0),
    all日:false,
    backgroundColor:#00c0ef,// Info(aqua)
    borderColor:#00c0ef// Info(aqua)
    },
    {
    title:'Birthday Party',
    start:new Date(y,m,d + 1,19,0),
    end:new Date(y,m,d + 1,22, 30),
    allDay:false,
    backgroundColor:#00a65a,//成功(绿色)
    borderColor:#00a65a//成功(绿色)
    },
    {
    title:'Click for Google',
    start:new Date(y,m,28),
    end:new Date(y,m,29),
    url:'http://google.com/',
    backgroundColor:#3c8dbc,//主要(淡蓝色)
    borderColor:#3c8dbc//主要(光-blue)
    }
    ]


    $ .ajax({
    类型:GET,
    url:'<% = Res olveUrl(EmpHolidays.aspx / TestOnWebService)%>',
    数据:{
    名称:$(this).attr('name'),
    startDate:$(this) .attr('startDate'),
    endDate:$(this).attr('endDate'),
    },
    成功:函数(事件)
    {
    $('#calendar')。fullCalendar('removeEvents');
    $('#calendar')。fullCalendar('addEventSource',events);
    $('#calendar')。fullCalendar('rerenderEvents');
    }
    });

    }, - %>

    // events:function(){
    // var data = getData();
    // console.log(data);

    // // var events = [];
    // // $ .each(data,function(key,val){
    // // events.push({
    // // title:val.title,
    // // start:val.start,
    // // end:val.end
    // //});
    // //});

    // //回调(事件);

    //},



    buttonText:{
    今天:'今天',
    月:'月' ,
    周:'周',
    天:'天'
    },

    eventDrop:function(event,dayDelta,minuteDelta,allDay,revertFunc){
    调试器;
    if(event.forceAllDay&&!allDay){
    revertFunc();
    } else {
    if(!confirm('Move event?')){
    revertFunc();
    } else {
    console.log(event.id);
    }
    }
    },

    eventDrop:function(event,delta,revertFunc){
    //内部列移动下降所以开始并调用ajax函数......
    //调试器;
    console.log(event.start.format());
    console.log(event.id);
    var defaultDuration = moment.duration($('#calendar')。fullCalendar('option','defaultTimedEventDuration'));
    var end = event.end || 。event.start.clone()添加(defaultDuration);

    var n = 1;
    var dateMnsFive2 = moment(end).subtract(n,'day');
    var date2 = dateMnsFive2.format(YYYY-MM-DD);

    console.log('end is'+ date2);

    //alert(event.title +被删除在+ event.start.format());

    // ***********************************
    startDateFinal = event.start.format();
    endDateFinal = date2;
    eventNameFinal = event.title;
    // **********************************



    },
    可编辑:true,
    droppable:true,//这样就可以把东西放到日历上!!!

    drop:function(date,event,allDay){//删除某些东西时调用此函数

    console.clear();
    console.log(已丢弃);


    console.log(date.format());


    var defaultDuration = moment.duration($('#calendar')。fullCalendar('option','defaultTimedEventDuration'));
    var end = date.clone()。add(defaultDuration); //在drop上我们只有给我们的日期
    console.log('end is'+ end.format());




    //检索被删除元素的存储事件对象
    var originalEventObject = $(this).data('eventObject');
    console.log(originalEventObject [title]);



    // ******************************** ***
    startDateFinal = date.format();
    endDateFinal = end.format();
    eventNameFinal = originalEventObject [title];
    // **********************************




    //我们需要复制它,以便多个事件没有对同一个对象的引用
    var copiedEventObject = $ .extend({},originalEventObject);



    //为其分配报告的日期
    copiedEventObject.start = date;
    copiedEventObject.allDay = allDay;

    copiedEventObject.backgroundColor = $(this).css(background-color);
    copiedEventObject.borderColor = $(this).css(border-color);

    //在日历上呈现事件
    //最后一个`true`参数确定事件是否粘住(http://arshaw.com/fullcalendar/docs/event_rendering/ renderEvent /)
    $('#calendar')。fullCalendar('renderEvent',copiedEventObject,true);

    //选中删除后删除复选框?
    if($('#drop-remove')。is(':checked')){
    //如果是这样,请从可拖动事件列表中删除元素
    $(此)卸下摆臂();
    }

    },

    eventResize:function(event,dayDelta,minuteDelta,revertFunc){



    var n = 1;
    var dateMnsFive = moment(event.end.format())。subtract(n,'day');
    var date = dateMnsFive.format(YYYY-MM-DD);
    alert(event.title +end is now+ date);

    // *************************************
    eventNameFinal = event.title;
    endDateFinal = date;
    // *************************************


    },
    事件:函数(开始,结束,回调){
    $ .ajax({
    类型:POST,// WebMethods不允许GET
    url:'<%= ResolveUrl(EmpHolidays.aspx / TestOnWebService)%>',// webmethod的url - 示例低于
    contentType:application / json; charset = utf-8 ,
    dataType:json,
    成功:函数(doc){
    var events = []; //这里创建的javascript事件对象
    var obj = $ .parseJSON( doc.d); //.net返回包含在d中的json



    for(var i = 0; i< obj.length; i ++){
    console.log(obj [i] ['id']);
    console.log(obj [i] ['title']);
    console.log(obj [i] ['开始']);
    的console.log(OBJ [I] [末端]);

    addCalanderEvent(obj [i] ['id'],obj [i] ['start'],obj [i] ['end'],obj [i] ['title']) ;

    }



    //回调(事件);
    }
    });
    }
    <% - 事件:{
    类型:POST,
    url:'<%= ResolveUrl(EmpHolidays.aspx / TestOnWebService)%> ;',
    contentType:application / json; charset = utf-8,
    dataType:json,
    data:{

    title:$(这个).attr('title'),//你的calevent对象有相同的参数'title','start',等等,所以这将起作用
    start:$(this).attr('start'), //将被解析为DateTime对象
    end:$(this).attr('end'),
    id:$(this).attr('id')
    },
    错误:function(){
    alert('获取事件时出错!');
    },
    颜色:'黄色',//非ajax选项
    textColor:'black'//非ajax选项
    } - %>

    });




    / *添加事件* /
    var currColor =#3c8dbc; //默认为红色
    //颜色选择器按钮
    var colorChooser = $(#color-chooser-btn);
    $(#color-chooser> li> a)。click(function(e){
    e.preventDefault();
    //保存颜色
    currColor = $(this).css(color);
    //为按钮添加颜色效果
    $('#add-new-event')。css({background-color:currColor ,border-color:currColor});
    });
    $(#add-new-event)。click(function(e){
    e.preventDefault();
    //获取值并确保它不是null
    var val = $(#new-event)。val();
    if(val.length == 0){
    return;
    }

    //创建事件
    var event = $(< div />);
    event.css({background-color:currColor,border-color:currColor, color:#ff})。addClass(external-event);
    event.html(val);
    $('#external-events')。prepend(event);

    //添加可拖动的功能
    ini_events(event);

    //从文本输入中删除事件
    $(#new-event) .val();
    });
    });



    函数saveEvent(){
    console.clear();
    console.log(startDateFinal + - + endDateFinal + - + eventNameFinal);

    $ .ajax({
    类型:POST,
    url:'<%= ResolveUrl(EmpHolidays.aspx / saveEvent)%>',
    数据:{'startYear':'+ startDateFinal +','endYear':'+ endDateFinal +','eventName':'+ eventNameFinal +'},
    contentType :application / json; charset = utf-8,
    dataType:'json',
    success:function(response){
    if(response.d){
    debugger ;
    }
    else {
    调试器;
    }
    },
    失败:函数(响应){
    调试器;
    }
    });
    }

    函数getData(){

    var data3;
    $ .ajax({
    类型:POST,
    url:'<%= ResolveUrl(EmpHolidays.aspx / TestOnWebService)%>',
    数据:{},
    contentType:application / json; charset = utf-8,
    dataType:json,
    async:false,
    success:function( doc){

    data3 = $ .parseJSON(doc.d);
    data3 = JSON.stringify(data3)

    },
    错误: function(xhr,status,error){
    alert(xhr.responseText);
    }
    });



    返回数据3;


    }


    函数addCalanderEvent(id,start,end,title)
    {

    console .log(id + start + end + title);

    var eventObject = {
    title:title,
    start:start,
    end:end,
    id:id,
    allDay:真
    };

    $('#calendar')。fullCalendar('renderEvent',eventObject,true);
    return eventObject;
    }

    < / script>

    < script src =../ plugins / jQuery / jQuery-2.2.0.min.js>< / script>
    <! - Bootstrap 3.3.5 - >
    < script src =../ bootstrap / js / bootstrap.min.js>< / script>
    <! - jQuery UI 1.11.4 - >
    < script src =https://code.jquery.com/ui/1.11.4/jquery-ui.min.js>< / script>
    <! - Slimscroll - >
    < script src =../ plugins / slimScroll / jquery.slimscroll.min.js>< / script>
    <! - FastClick - >
    < script src =../ plugins / fastclick / fastclick.js>< / script>
    <! - AdminLTE App - >
    < script src =../ dist / js / app.min.js>< / script>
    <! - 用于演示目的的AdminLTE - >
    < script src =../ dist / js / demo.js>< / script>
    <! - fullCalendar 2.2.5 - >
    < script src =https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js>< / script>
    < script src =../ plugins / fullcalendar / fullcalendar.min.js>< / script>

    这是代码隐藏函数,它从db返回json数据

      [WebMethod] 
    public static String TestOnWebService()
    {
    int i = 1;

    string myJsonString =;
    列表< object> myList = new List< object>();
    dt = db.getPublicHolidays();

    foreach(dt.Rows中的DataRow dr)
    {
    var id = i;
    var title = dr [name]。ToString();
    var start = dr [startDate]。ToString();
    var end = dr [endDate]。ToString();


    //将Implicity类型的var转换为Date Time
    DateTime RealStartDate = Convert.ToDateTime(start);
    DateTime RealEndDate = Convert.ToDateTime(end);


    //将日期时间转换为ISO
    字符串SendStartDate = RealStartDate.ToString(s);
    String SendEndDate = RealEndDate.ToString(s);

    // string start2 =((RealStartDate.Ticks - 621355968000000000)/ 10000000).ToString();
    // string end2 =((RealEndDate.Ticks - 621355968000000000)/ 10000000).ToString();

    事件t_table = new事件(id,title,SendStartDate,SendEndDate);


    myList.Add(t_table);
    i ++;

    }

    myJsonString =(new JavaScriptSerializer())。Serialize(myList);
    返回myJsonString;

    }
    }

    AND MY EVENTS CLASS

     公共类事件
    {
    public int id {get;组; }
    public String title {get;组; }
    public String start {get;组; }
    public String end {get;组; }

    public Events(int id2,String I,String t,String ds)
    {
    this.id = id2;
    this.title = I;
    this.start = t;
    this.end = ds;
    }


    }

    HERE IS THE OUTPUT :D :D




    Currently working on the jquery fullcalendar, I've been unable to add events to it from code behind.

    I've tried all of these possible solutions but none of them worked for me:

    This is my code

    [WebMethod]

    public static String TestOnWebService()
            {
                int i = 1;
    
                string myJsonString = "";
                List<object> myList = new List<object>();
                dt = db.getPublicHolidays();
    
                foreach (DataRow dr in dt.Rows)
                {
                            var id = i;
                            var title = dr["name"].ToString();
                            var start = dr["startDate"].ToString();
                            var end = dr["endDate"].ToString();
    
    
                            //Convert Implicity typed var to Date Time
                            DateTime RealStartDate = Convert.ToDateTime(start);
                            DateTime RealEndDate = Convert.ToDateTime(end);
    
    
                            //Convert Date Time to ISO
                            String SendStartDate = RealStartDate.ToString("s");
                            String SendEndDate = RealEndDate.ToString("s");
    
    
                            Events t_table = new Events(id, title, start, end);
    
                            myList.Add(t_table);
                            i++;
                        }
    
                myJsonString = (new JavaScriptSerializer()).Serialize(myList);
                return myJsonString;
                }
            }
    

    and my events class

     public class Events
    {
        public int id { get; set; }
        public String title { get; set; }
        public String start { get; set; }
        public String end { get; set; }
    
        public Events(int id2, String I, String t, String ds)
        {
            this.id = id2;
            this.title = I;
            this.start = t;
            this.end = ds;
        }
    }
    

    Here is the front end code

    events: function (start, end, callback) {
              $.ajax({
                  type: "POST",    //WebMethods will not allow GET
                  url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',   //url of a webmethod - example below
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function (doc) {
                      var events = [];   //javascript event object created here
                      var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"
    
                      for(var i=0;i<obj.length;i++){
                          console.log(obj[i]['id']);
                          console.log(obj[i]['title']);
                          console.log(obj[i]['start']);
                          console.log(obj[i]['end']);
                      }
    
    
                      $(obj.event).each(function () { //yours is obj.calevent                          
                          events.push({
                              title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                              start: $(this).attr('start'), // will be parsed into DateTime object    
                              end: $(this).attr('end'),
                              id: $(this).attr('id')
                          });
                      });
                      callback(events);
                  }
              });
          }
    

    This is the result I get

    解决方案

    SO AFTER THREE DAYS OF STRUGGLE, I GOT IT TO WORK! I added events from database to add to the jquery fullcalender. this is what solved my problem! Here is my code

    My html and javascript code

        <!-- Main content -->
            <section class="content">
              <div class="row">
                <div class="col-md-3">
                  <div class="box box-solid">
                    <div class="box-header with-border">
                      <h4 class="box-title">Draggable Events</h4>
                    </div>
                    <div class="box-body">
                      <!-- the events -->
                      <div id="external-events">
    
    
                          <div runat="server" id="check">
    
                          </div>
    
    
    
                        <div class="checkbox">
                          <label for="drop-remove">
                            <input type="checkbox" id="drop-remove">
                            remove after drop
                          </label>
                        </div>
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /. box -->
                  <div class="box box-solid">
                    <div class="box-header with-border">
                      <h3 class="box-title">Create Event</h3>
                    </div>
                    <div class="box-body">
                      <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
                        <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
                        <ul class="fc-color-picker" id="color-chooser">
                          <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
                          <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
                        </ul>
                      </div>
                      <!-- /btn-group -->
                      <div class="input-group">
                        <input id="new-event" type="text" class="form-control" placeholder="Event Title">
    
                        <div class="input-group-btn">
                          <button id="add-new-event" type="button" class="btn btn-primary btn-flat">Add</button>
                        </div>
                        <!-- /btn-group -->
                      </div>
                      <!-- /input-group -->
                    </div>
                  </div>
    
                    <br />
                    <button onclick="saveEvent();">Save</button>
                </div>
                <!-- /.col -->
                <div class="col-md-9">
                  <div class="box box-primary">
                    <div class="box-body no-padding">
                      <!-- THE CALENDAR -->
                      <div id="calendar"></div>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <!-- /. box -->
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </section>
            <!-- /.content -->
    
                     </ContentTemplate>
    
                     </asp:UpdatePanel>
                <!-- jQuery 2.2.0 -->
    
        <!-- Page specific script -->
        <script>
            var data2="";
            var startDateFinal="";
            var endDateFinal="";
            var eventNameFinal="";
    
          $(function () {
    
            /* initialize the external events
             -----------------------------------------------------------------*/
            function ini_events(ele) {
              ele.each(function () {
    
                // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                // it doesn't need to have a start or end
                  var eventObject = {
                      title: $.trim($(this).text())
                  };
    
    
    
                // store the Event Object in the DOM element so we can get to it later
                $(this).data('eventObject', eventObject);
    
                // make the event draggable using jQuery UI
                $(this).draggable({
                  zIndex: 1070,
                  revert: true, // will cause the event to go back to its
                  revertDuration: 0  //  original position after the drag
                });
    
    
    
              });
            }
    
            ini_events($('#external-events div.external-event'));
    
            /* initialize the calendar
             -----------------------------------------------------------------*/
            //Date for the calendar events (dummy data)
            var date = new Date();
            var d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear();
            $('#calendar').fullCalendar({
              header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
              },
              <%--events: {
                  $.ajax({
                      type: "POST",    
                      url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
                      data: "{}",
                      contentType: "application/json; charset=utf-8",  
                      dataType: "json",
                      success: function (doc) {
                          alert("Success");
                          var events = [];
                          alert(doc.d);
                          var obj = $.parseJSON(doc.d);
                          for(var i=0;i<obj.length;i++){
    
    
                                  title: 'All Day Event',
                                  start: new Date(y, m, 1),
                                  backgroundColor: "#f56954", //red
                                  borderColor: "#f56954" //red
    
    
                                console.log(obj[i]['id']);
                                 console.log(obj[i]['title']);
                                  console.log(obj[i]['start']);
                                  console.log(obj[i]['end']);
                          }
    
    
                          //$(obj.event).each(function () {                           
                          //    events.push({
                          //        id: $(this).attr('id'),
                          //        title: $(this).attr('title'),
                          //        start: $(this).attr('start'),
                          //        end: $(this).attr('end'),
                          //        backgroundColor: "#0073b7", 
                          //        borderColor: "#0073b7"            
                          //    });
    
    
    
                         // });                     
                          //callback(events);
                          callback && callback(events);
                      },
                      error: function(xhr, status, error) {
                          alert(xhr.responseText);
                      }
                  });
                   events: [
                {
                  title: 'All Day Event',
                  start: new Date(y, m, 1),
                  backgroundColor: "#f56954", //red
                  borderColor: "#f56954" //red
                },
                {
                  title: 'Long Event',
                  start: new Date(y, m, d - 5),
                  end: new Date(y, m, d - 2),
                  backgroundColor: "#f39c12", //yellow
                  borderColor: "#f39c12" //yellow
                },
                {
                  title: 'Meeting',
                  start: new Date(y, m, d, 10, 30),
                  allDay: false,
                  backgroundColor: "#0073b7", //Blue
                  borderColor: "#0073b7" //Blue
                },
                {
                  title: 'Lunch',
                  start: new Date(y, m, d, 12, 0),
                  end: new Date(y, m, d, 14, 0),
                  allDay: false,
                  backgroundColor: "#00c0ef", //Info (aqua)
                  borderColor: "#00c0ef" //Info (aqua)
                },
                {
                  title: 'Birthday Party',
                  start: new Date(y, m, d + 1, 19, 0),
                  end: new Date(y, m, d + 1, 22, 30),
                  allDay: false,
                  backgroundColor: "#00a65a", //Success (green)
                  borderColor: "#00a65a" //Success (green)
                },
                {
                  title: 'Click for Google',
                  start: new Date(y, m, 28),
                  end: new Date(y, m, 29),
                  url: 'http://google.com/',
                  backgroundColor: "#3c8dbc", //Primary (light-blue)
                  borderColor: "#3c8dbc" //Primary (light-blue)
                }
              ]
    
    
              $.ajax({
                      type: "GET",
                      url:  '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
                      data: {
                          name: $(this).attr('name'),
                          startDate: $(this).attr('startDate'),
                          endDate: $(this).attr('endDate'),
                      },
                          success: function(events)
                          {
                              $('#calendar').fullCalendar('removeEvents');
                              $('#calendar').fullCalendar('addEventSource', events);         
                              $('#calendar').fullCalendar('rerenderEvents' );
                          }
                      });
    
              },--%>
    
              // events: function () {
              //    var data = getData();
              //   console.log(data);
    
              //   //var events = [];
              //   //       $.each(data, function (key, val) {
              //   //           events.push({
              //   //               title: val.title,
              //   //               start: val.start, 
              //   //               end: val.end
              //   //           });
              //   //       });  
    
              //          //callback(events); 
    
              //},
    
    
    
              buttonText: {
                today: 'today',
                month: 'month',
                week: 'week',
                day: 'day'
              },
    
              eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
                  debugger;
                  if (event.forceAllDay && !allDay) {
                      revertFunc();
                  } else {
                      if (!confirm('Move event?')) {
                          revertFunc();
                      } else {
                          console.log(event.id);
                      }
                  }
              },
    
              eventDrop: function (event, delta, revertFunc) {
                  //inner column movement drop so get start and call the ajax function......
                  //debugger;
                  console.log(event.start.format());
                  console.log(event.id);
                  var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
                  var end = event.end || event.start.clone().add(defaultDuration);
    
                   var n = 1;
                  var dateMnsFive2 = moment(end).subtract(n , 'day');
                  var date2 = dateMnsFive2.format("YYYY-MM-DD");
    
                  console.log('end is ' + date2);
    
                  //alert(event.title + " was dropped on " + event.start.format());
    
                   //***********************************
                  startDateFinal = event.start.format();
                  endDateFinal = date2;
                  eventNameFinal = event.title;
                  //**********************************
    
    
    
              },
              editable: true,
              droppable: true, // this allows things to be dropped onto the calendar !!!
    
              drop: function (date, event, allDay) { // this function is called when something is dropped
    
                  console.clear();
                  console.log("dropped");
    
    
                  console.log(date.format());
    
    
                  var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
                  var end = date.clone().add(defaultDuration); // on drop we only have date given to us
                  console.log('end is ' + end.format());
    
    
    
    
                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');
                console.log(originalEventObject["title"]);
    
    
    
                  //***********************************
                  startDateFinal = date.format();
                  endDateFinal = end.format();
                  eventNameFinal = originalEventObject["title"];
                  //**********************************
    
    
    
    
                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);
    
    
    
                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
    
                copiedEventObject.backgroundColor = $(this).css("background-color");
                copiedEventObject.borderColor = $(this).css("border-color");
    
                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
    
                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                  // if so, remove the element from the "Draggable Events" list
                  $(this).remove();
                }
    
              },
    
              eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
    
    
    
                    var n = 1;
                  var dateMnsFive = moment(event.end.format()).subtract(n , 'day');
                  var date = dateMnsFive.format("YYYY-MM-DD");
                  alert(event.title + " end is now " + date);
    
                  //*************************************
                  eventNameFinal = event.title;
                  endDateFinal = date;
                  //*************************************
    
    
              },
             events: function (start, end, callback) {
                  $.ajax({
                      type: "POST",    //WebMethods will not allow GET
                      url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',   //url of a webmethod - example below
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function (doc) {
                          var events = [];   //javascript event object created here
                          var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"
    
    
    
                          for(var i=0;i<obj.length;i++){
                              console.log(obj[i]['id']);
                              console.log(obj[i]['title']);
                              console.log(obj[i]['start']);
                              console.log(obj[i]['end']);
    
                              addCalanderEvent(obj[i]['id'],obj[i]['start'],obj[i]['end'],obj[i]['title']);
    
                          }
    
    
    
                          //callback(events);
                      }
                  });
              }
              <%--events: {
                type: "POST", 
                url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: {
    
                    title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                    start: $(this).attr('start'), // will be parsed into DateTime object    
                    end: $(this).attr('end'),
                    id: $(this).attr('id')
                },
                error: function() {
                    alert('there was an error while fetching events!');
                },
                color: 'yellow',   // a non-ajax option
                textColor: 'black' // a non-ajax option
            }--%>
    
            });
    
    
    
    
            /* ADDING EVENTS */
            var currColor = "#3c8dbc"; //Red by default
            //Color chooser button
            var colorChooser = $("#color-chooser-btn");
            $("#color-chooser > li > a").click(function (e) {
              e.preventDefault();
              //Save color
              currColor = $(this).css("color");
              //Add color effect to button
              $('#add-new-event').css({"background-color": currColor, "border-color": currColor});
            });
            $("#add-new-event").click(function (e) {
              e.preventDefault();
              //Get value and make sure it is not null
              var val = $("#new-event").val();
              if (val.length == 0) {
                return;
              }
    
              //Create events
              var event = $("<div />");
              event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event");
              event.html(val);
              $('#external-events').prepend(event);
    
              //Add draggable funtionality
              ini_events(event);
    
              //Remove event from text input
              $("#new-event").val("");
            });
          });
    
    
    
          function saveEvent(){
                console.clear();
                console.log(startDateFinal +" - "+ endDateFinal+" - "+eventNameFinal);
    
                $.ajax({
                     type: "POST",
                     url: '<%= ResolveUrl("EmpHolidays.aspx/saveEvent") %>',
                     data: "{'startYear':'" + startDateFinal + "', 'endYear':'" + endDateFinal + "', 'eventName':'" + eventNameFinal + "'}",
                     contentType: "application/json; charset=utf-8",
                     dataType: 'json',
                     success: function (response) {
                          if (response.d) {
                             debugger;
                     }
                     else {
                              debugger;
                     }
                     },
                     failure: function (response) {
                              debugger;
                     }
                });
            }
    
           function getData() {
    
            var data3;
            $.ajax({
                type: "POST",    
                url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
                data: "{}",
                contentType: "application/json; charset=utf-8",  
                dataType: "json",
                async:false,
                 success: function (doc) {
    
                          data3 = $.parseJSON(doc.d);
                          data3 = JSON.stringify(data3)
    
                      },
                      error: function(xhr, status, error) {
                          alert(xhr.responseText);
                      }
            });
    
    
    
            return data3;
    
    
            }
    
    
            function addCalanderEvent(id, start, end, title)
            {
    
            console.log(id + start + end + title);
    
            var eventObject = {
            title: title,
            start: start,
            end: end,
            id: id,
            allDay: true
            };
    
            $('#calendar').fullCalendar('renderEvent', eventObject, true);
            return eventObject;
            }
    
        </script>
    
    <script src="../plugins/jQuery/jQuery-2.2.0.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <!-- Slimscroll -->
    <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="../plugins/fastclick/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="../dist/js/app.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="../dist/js/demo.js"></script>
    <!-- fullCalendar 2.2.5 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="../plugins/fullcalendar/fullcalendar.min.js"></script>
    

    Here is the code behind function which returns json data from db

    [WebMethod]
            public static String TestOnWebService()
            {
                int i = 1;
    
                string myJsonString = "";
                List<object> myList = new List<object>();
                dt = db.getPublicHolidays();
    
                foreach (DataRow dr in dt.Rows)
                {
                            var id = i;
                            var title = dr["name"].ToString();
                            var start = dr["startDate"].ToString();
                            var end = dr["endDate"].ToString();
    
    
                            //Convert Implicity typed var to Date Time
                            DateTime RealStartDate = Convert.ToDateTime(start);
                            DateTime RealEndDate = Convert.ToDateTime(end);
    
    
                            //Convert Date Time to ISO
                            String SendStartDate = RealStartDate.ToString("s");
                            String SendEndDate = RealEndDate.ToString("s");
    
                           //string start2 = ((RealStartDate.Ticks - 621355968000000000) / 10000000).ToString();
                           //string end2 = ((RealEndDate.Ticks - 621355968000000000) / 10000000).ToString();
    
                    Events t_table = new Events(id, title, SendStartDate, SendEndDate);
    
    
                            myList.Add(t_table);
                            i++;
    
                        }
    
                myJsonString = (new JavaScriptSerializer()).Serialize(myList);
                return myJsonString;
    
                }
        }
    

    AND MY EVENTS CLASS

    public class Events
    {
        public int id { get; set; }
        public String title { get; set; }
        public String start { get; set; }
        public String end { get; set; }
    
        public Events(int id2, String I, String t, String ds)
        {
            this.id = id2;
            this.title = I;
            this.start = t;
            this.end = ds;
        }
    
    
    }
    

    HERE IS THE OUTPUT :D :D

    这篇关于使用JSON将事件映射到FullCalendar的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆