Question

我想使用FullCalendar建立一个父母可以为父母预订假日照顾的系统。所以我需要将假期添加为事件，以便用户在预订时清楚。我的问题是：我需要用户点击的确切日期。让我们说我们从8月1日到20日测试假期，并且用户想要预订8月15日，我需要获得8月15日。

在这种组合中，这似乎不适用于FullCalendar。 dayClick事件正是我所需要的：

dayClick: function(date, jsEvent, view, resourceObj) {
    alert('You clicked on ' + moment(date).format('L'));
}

但它仅在单击日期未指定任何事件时有效。但在我的情况下，我有一个事件。因此eventClick被解雇而不是dayClick。 eventClick的缺点是我只能获得整个事件（例如测试假期从我的例子中的8月20日开始），但不是用户点击的那一天。

eventClick: function(calEvent, jsEvent, view) {
    // No 'date' parameter avaliable here, only calEvent.start and  calEvent.end for the WHOLE event
    // But not the date where the user clicked on
    alert("Event started: " + moment(calEvent.start).format('L'));
}

为了更清楚，这个场景中有一个完整的演示案例：

$('#test-div').fullcalendar({
    events: [{
        title: 'Test holidays',
        start: '2016-08-01',
        end: '2016-08-20'
    }]
});

现在我们已经在2016-08-01至2016-08-20期间注册为活动的考试假期。我需要一个解决方案，当用户点击2016-08-02我得到2016-08-02。在2016-08-05我得到2016-08-05等等。 eventClick活动只会给我2016-08-01作为开始，2016-08-20作为结束。

Answer 1

<input type="text id="plannedTaskDateTime">

添加到上面的输入类型

<script>

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            events: [{
    title: 'Test holidays',
    start: '2016-08-01',
    end: '2016-08-20'
}],
            editable: true,
            defaultView: defaultViewtype,
            firstDay: weekStartDay,//Start day of Calender
            hiddenDays: weekEndArr, // Hide Days Non Working Days 
            eventLimit: true, // allow "more" link when too many events
            eventRender: function(event, element) {
                 if(event.icon){          
                    element.find(".fc-title").prepend("<i class='fa fa-"+event.icon+"'></i>");
                 }
            },

            dayClick: function(date, jsEvent, view,start, end, allDay) {
                var cellYear = date.year();
                var cellMonth = date.month() + 1;
                var cellDay = date.date();
                $('#plannedTaskDateTime').val(cellYear+"-"+cellMonth+"-"+cellDay+" 00:00:00");

                var check = generateDateTOYYMMDD(date._d)
                var today = generateDateTOYYMMDD(new Date())
                if(check < today)
                {
                        alert('You can not plan for past');
                }
                 else
                {
                   //DO as You wish
                }



            }

        });

function generateDateTOYYMMDD(DateObj){
    var DateDay = DateObj.getDate();
    DateDay = (DateDay<10) ? "0"+DateDay : DateDay;
    var DateMonth = DateObj.getMonth() + 1;
    DateMonth = (DateMonth<10) ? "0"+DateMonth : DateMonth;
    var DateYear = DateObj.getFullYear();
    var DateStr = DateYear + "-" + DateMonth+ "-" + DateDay;
    return DateStr;
}
</script>

FullCalendar获得多日活动的点击日期

1 个答案: