如何在完整的日历插件中显示每月重复的事件

时间:2015-11-04 12:01:54

标签: fullcalendar

使用此代码我能够显示每日和每周活动,但我无法显示每月活动。我在我的laravel项目中使用完整的日历插件。使用dow参数我显示每日事件和范围显示事件形成开始日期。

      $('#calendar').fullCalendar({
      defaultDate: moment(),
      editable: false,
      eventLimit: true, // allow "more" link when too many events
      events:function(start, end, timezone, callback){
        $.ajax({url: baseUrl +"/calenderevents",
                type:'post',
                success: function(data)
                {
                    var events = [];
                    var range  = [];
                    $.each(data, function(index, element) {
                        events.push({
                            title       : element.title,
                            start       : element.start,
                            end         : element.end,
                            id          : element.id,
                            dow         : element.dow,
                            ranges      : range
                        });

                        range.push({
                                start: moment(element.ranges)
                        });
                 });

                callback(events);

                }
            });
      },
      dayClick: function() {
                $('#event-message').text("Add Activity");
                $('#calender-error').html('');
                if($("#user_role_id").data("user-role") == 1){
                 return false;
                }

                $("#delete-event").hide();
                $('.dimensions').attr('readonly', 'readonly');
                $('#clear-form').click();
                $('.calender-event').attr({
                                        'id':'calender_event_form',
                                        'action':baseUrl+'/assisted',
                                        });
                $.fancybox({
                    content: $('#add_calender_event'),
                    padding : 10,
                    fitToView:false,
                    autoSize: false,
                    width:485,
                    height:600,
                    openEffect : 'elastic',
                    closeEffect : 'elastic',
                    });
            },
      eventRender: function (event, element) {
        // element.addClass('href', 'javascript:void(0);');
        element.addClass('event');
        element.attr('id', event.id);

        if("ranges" in event)
        {
            return (event.ranges.filter(function(range){ // test event against all the ranges
                return (event.start.isAfter(range.start));
            }).length)>0;
        }

      }
    });

2 个答案:

答案 0 :(得分:0)

 var date = new Date();
 var d = date.getDate();
 var m = date.getMonth();
 var y = date.getFullYear();

var defaultEvents = [

    <c:forEach var='periodicTask' items='${periodicTaskTemplates}'>
        <c:choose>
        <c:when test='${fn:containsIgnoreCase(periodicTask.frequency, "Weekly")}'>
                { id: '${periodicTask.id}', title: '${periodicTask.task}',
                     start: '10:00', // a start time (10am in this example)
                        end: '14:00', // an end time (6pm in this example)
                         ranges: [{ //repeating events are only displayed if they are within one of the following ranges.
                            start: moment(new Date('${periodicTask.startDate}')).startOf('year'), //next two weeks
                            end: moment(new Date('${periodicTask.endDate}')).add(7,'d'),
                        }]

                    ,type:'${periodicTask.description}',location:'${periodicTask.location.name}',endDate:new Date('${periodicTask.endDate}'),area: '${periodicTask.area.name}',frequency:'${periodicTask.frequency}', startDate: new Date('${periodicTask.startDate}'),repeat: 0,color: "#"+ Math.random().toString(16).slice(2, 8) ,dow: [${periodicTask.day}]},
        </c:when>
            <c:otherwise>
                { id: '${periodicTask.id}', title: '${periodicTask.task}',start: new Date(y,  m, '${periodicTask.startDay}'), end: new Date(y, m, '${periodicTask.endDay}', 24, 0, 0, 0) ,type:'${periodicTask.description}',area: '${periodicTask.area.name}',startDate: new Date('${periodicTask.startDate}'),frequency:'${periodicTask.frequency}',location:'${periodicTask.location.name}', repeat: 1,endDate:new Date('${periodicTask.endDate}'),  color: "#"+ Math.random().toString(16).slice(2, 8) },
            </c:otherwise>
         </c:choose>
    </c:forEach>
    ];
    // Any value represanting monthly repeat flag
    var REPEAT_MONTHLY = 1;
    // Any value represanting yearly repeat flag
    var REPEAT_YEARLY = 2;
    function Unix_timestamp(t)
    {
        var dt = new Date(t*1000);
        var hr = dt.getHours();
        var m = "0" + dt.getMinutes();
        var s = "0" + dt.getSeconds();
        return dt;  
    }

 $('#calendar').fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },  
        displayEventTime: false,            
        eventLimit: true, 
        editable: true,
        eventMouseover: function (data, event, view) {
            //  $('#'+data.id).tooltip('show')
             tooltip = '<div  class="tooltip tooltip-top" style="display:none;position:absolute;border:1px solid #333;background-color:#161616;border-radius:5px;padding:10px;  color:#fff;font-size:12px Arial;;height:auto;position:absolute;z-index:10001;line-height: 150%;">' + 'title ' + ':- ' + data.title + '</br>' + 'description ' + ':- ' + data.type + '</br>' + 'location ' + ':- ' + data.location + '</br>' + 'Frequency ' + ':- ' + data.frequency + '</br>' + 'Area ' + ':- ' + data.area+'';
            if(data.frequency =='Weekly'){
                var weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
                tooltip += '</br>'+'Day' + ':- ' + weekday[data.dow] + '</br></div>';
            }else{
                tooltip += '</br>'+'Start Date  ' + ':- ' + data.startDate + '</br>End Date ' + ':- ' + data.endDate + '</br></div>';
            }
             $("body").append(tooltip);
            $(this).mouseover(function (e) {
                $(this).css('z-index', 10000);
                $('.tooltip ').fadeIn('500');
                $('.tooltip ').fadeTo('10', 1.9);
            }).mousemove(function (e) {
                $('.tooltip ').css('top', e.pageY + 10);
                $('.tooltip ').css('left', e.pageX + 20);
                }); 
        },
        eventDrop: function(event, delta, revertFunc) {
          swal({
                  title: "Are you sure?",
                  type: "warning",
                  showCancelButton: true,
                  confirmButtonColor: "#DD6B55",
                  confirmButtonText: "Yes, Re-Shedule it!"
              },
              function (isConfirm) {
                  if (isConfirm)
                  {
                      window.location = "${pageContext.request.contextPath}/task/periodic-task-shedule-update/"+event.id+"/"+event.start.format()+"/"+new Date(event.start).getDay() ;
                  }
                  else{
                      revertFunc()
                  }
              });
          },
          eventMouseout: function (data, event, view) {
              $(this).css('z-index', 8);
              $('.tooltip ').remove();
          },
        events: function(start, end, timezone, callback) {
       /*    $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/task/calendar-periodic-task-view",
                dataType: 'json',
                data: {
                  start: event.start,
                  end: event.end
                },
                success: function(doc) {
                      var events = [];
                        $(doc).find('event').each(function() {
                          events.push({
                            start:  $('#start').val(''),
                            end: $('#end').val('')
                          });
                        });
                        callback(events);
                      } 
            }); */
            var current_month = new Date($('#calendar').fullCalendar('getDate').format()).getMonth()+1;
            var current_fullYear = new Date($('#calendar').fullCalendar('getDate').format()).getFullYear();
            var events = [];
            $.each(defaultEvents, function(key, event) {
                if (Date.parse(new Date(event.endDate)) >= Date.parse(new Date($('#calendar').fullCalendar('getDate').format()))) {
                        if(event.repeat ===0  ){
                            var objevent={
                                        start: "14:00",
                                        color:event.color,
                                        id:event.id,
                                        location:event.location,
                                        repeat:event.repeat,
                                        title:event.title,
                                        dow:event.dow,
                                        area:event.area,
                                        frequency:event.frequency,
                                        type:event.type,
                                        endDate:event.endDate,
                                        startDate: event.startDate
                                    }
                                events.push(objevent); 
                        }else if(event.repeat === 1 && ( current_month > (new Date(event.start).getMonth()+1)) || current_fullYear > new Date(event.start).getFullYear() ){
                            var new_start_date = new Date(current_fullYear+'-'+current_month+'-'+new Date(event.start).getDate());
                            var new_end_date = new Date(current_fullYear+'-'+current_month+'-'+new Date(event.end).getDate());
                            var objevent={
                                    color:event.color,
                                    start:new_start_date,
                                    id:event.id,
                                    location:event.location,
                                    repeat:event.repeat,
                                    area:event.area,
                                    frequency:event.frequency,
                                    end:new_end_date,
                                    title:event.title,
                                    type:event.type,
                                    endDate:event.endDate,
                                    startDate: event.startDate
                                }
                            events.push(objevent);
                        }
                        events.push(objevent); 
                } 
            });
            callback(events);
        },
    });

答案 1 :(得分:0)

var matchingDaysBetween = function (start, end, test) {
    var days = [];
    for (var day = moment(start); day.isBefore(end); day.add(30, 'd')) {
        if (test(day)) {
            days.push(moment(day));
            // push a copy of day
        }
    }
    return days;
}