标签: fullcalendar-3

我正在使用jQuery FullCalendar作为我的网站中用于可用性议程的日历.

fullcalendar中是否有任何函数/方法/选项可以按天处理我的重复事件？例如,星期一只到上午7:00到9:00,周二 - 下午4:00到晚上9:00,这样的事情？

我正在查看官方 FullCalendar 站点的调试页面。我想安排一个从 22/09/2015 到 30/09/2015 (dd/mm/yyyy) 的活动。但它只显示 22/09/2015 到 29/09/2015 的日期 - 30/09/2015 丢失。

这是代码：

$(function() { // document ready
   $('#calendar').fullCalendar({
     header: {
       left: 'prev,next today',
       center: 'title',
       right: 'month,agendaWeek,agendaDay'
     },
     defaultDate: '2014-11-12',
     editable: true,
     eventLimit: true, // allow "more" link when too many events
     events: [
        {
          title: 'Meeting',
          start: '2015-09-22',
          end: '2015-09-30'
        }
     ]
   });  
});

这是输出的图像：

这段代码有什么问题？

我正在 Ionic 3 项目上进行编码，其中我使用 FullCalendar 插件来显示日历 ui。当我尝试更改日历上某一天的背景时，我在页面模块中遇到此代码问题。我使用了 FullCalendar 的 dayRender 函数。

$('#calendar').fullCalendar({

            dayRender: function (date, cell) {
              var today = new Date('2017-09-11T00:40Z')
              if (date.getDate() == today.getDate()) {
                  this.cell.css("background-color", "red");
              }
            },
});

我在输出中出现运行时错误：

date.getDate() 不是函数。（在“date.getDate()”中，“date.getDate()”未定义）Ionic 3 中的 FullCalendar

所以我不明白为什么，因为日期是一个已在 FullCalendar 库中定义的日期对象。

有什么解决方案吗？

ps：抱歉我的英语不好。

我正在尝试更改日历中所选日期的背景颜色。在我下面的代码中，它突出显示了所有点击日期，我如何只突出显示最后一次点击日期？

dayClick: function (day){
  var mydate = new Date(this[0].getAttribute("data-date"));
  var dateArray = mydate.toDateString().split(" ");
  document.querySelectorAll(".calendar-mobile p")[0].innerHTML = j_monthNames[mydate.getMonth()] + " " + mydate.getDate() + "?" + "(" + j_dayNames[dateArray[0].toLocaleLowerCase()] + ")";
  document.body.classList.remove("calendar-open");

  $month = '' + (mydate.getMonth() + 1);
  $day = '' + mydate.getDate();
  $year = mydate.getFullYear();

  if ($month.length < 2) $month = '0' + $month;
  if ($day.length < 2) $day = '0' + $day;
  $dates = [$year, $month, $day].join('-');
  $('[data-date='+$dates+']').css({"color": "red", "backgroundColor": "yellow",});
},

我正在使用完整的日历来生成日期和显示事件。一切正常，但是我想要一个附加功能，即如果它有3个以上事件，我想将单元格颜色更改为红色。如果日期具有3个以上的功能/事件，则整个单元格颜色应更改为红色。这样用户就可以知道预订已满。我还粘贴了以下屏幕截图

以下是我的代码：-

 function clickmeforcalender(event) {

    debugger


    $('#calendar').show();
    var events = [];
    $.ajax({
        type: "GET",
        url: "/Booking/GetEvents",
        success: function (data) {
            $.each(data, function (i, a) {

                events.push({

                    title: a.Function_Name,
                    start: a.Function_Date1,
                    url: a.Booking_ID,
                    FSlot: a.Function_Slot,
                    MSlot: a.Marquee_Name,
                    Marquee_Slot: a.Marquee_Slot,
                    BPerson: a.Booking_Person,
                    BookedBy: a.Booking_Name,
                });

                $("#calendar").css("background-color", "WHITE");
            })
            var allEvents = $(".calendar").fullCalendar("clientEvents");

            var exists = 0;
            $.each(allEvents, function (index, value) {

                if (new Date(value.start).toDateString() === new Date(date).toDateString()) {
                    exists++;
                    if (exists == 2) {

                        value.css("background-color", "red");
                    }

                }

            });
            GenerateCalender(events);
        },

        error: …

我想在Adam Shaw的fullcalendar中显示事件的bootstrap工具提示.我试过这段代码:

eventMouseover: function (event, jsEvent) {
                $(this).tooltip();
                $(this).css('rel', 'tooltip');
                $(this).tooltip({
                    selector: '[rel=tooltip]'
                });                
            },

但它不起作用.这有什么不对？

如何在一个月的视图中仅显示2周或15天？

我尝试了以下方法:

$('#calendar').fullCalendar({
defaultView: 'month',
duration: { weeks: 2 } // or days: 15
});

但它不起作用.我阅读了文档,但它只显示了基本/议程视图的自定义.

编辑:添加欲望日历的图片

图片

代码：

<script>
    $('#calendar').fullCalendar({
        events: <?php echo $datas; ?>,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        eventClick:  function(event, jsEvent, view) {
            $("#edit_delete").html(
                                '<a href="<?php echo base_url(); ?>timetable/edit_professor_classes/'+event.id+'" style="margin-right: 5px;"><i class="fa fa-edit btn btn-success"></i></a>'+'<a href="<?php echo base_url(); ?>timetable/delete_professor_classes/'+event.id+'"><i class="fa fa-trash btn btn-danger"></i></a>'
                            ),
            $('#modalTitle').html(event.title);
            $('#classes').html(event.classes);
            $('#semester').html(event.semester);
            $('#subject').html(event.subject);
            $('#startdate').html(event.dates);
            $('#timestart').html(event.times);
            $('#fullCalModal').modal('show');
        }
    });
</script>

在此代码中，我使用 fullcalendar js 创建了一个事件日历，该日历工作正常，但问题是如果我在同一日期添加多个事件，那么它会显示很长时间。我想显示最低限度和一些石灰view more event显示我该怎么做？请帮我。

谢谢

我现在对日历的设置有疑问。我想使第一行的时间在AgendaWeek视图和AgendaDay视图中更宽一些，但是我在fullcalendar.css中找不到相应的CSS代码。有人能帮我吗？

对于 fullCalendar 我编写了以下代码：

$('#mycalendar').fullCalendar(
            {
                allDaySlot:false,
                slotDuration: '00:30:00' ,  
                //slotMinutes: '120',           
                lang: currentLangCode,
                minTime: '4:00am',
                maxTime: '24:00pm',
                slotEventOverlap: true,
                slotLabelFormat:'h(:mm)a',
                showAgendaButton: true,
                columnFormat: { month: 'ddd', week: 'ddd M/D', day: 'ddd M/D' },
                timeFormat: 'H:mm',
                defaultView: 'listWeek',
                eventLimit: true,
                theme:false,
                editable: true,
                contentHeight:'auto',
                weekends: false ,
                //timezoneParam: 'America/Los_Angeles',
                //ignoreTimezone: false,
                header:
                {
                    left: 'prev,next today',
                    center: 'title',
                    // right: 'agendaWeek'
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                views: {
                    listDay: { buttonText: 'Day' },
                    listWeek: { buttonText: 'Week' },
                    month: {
                        columnFormat: 'ddd'
                    }, …

大家！我试图在全日历中显示有关事件的工具提示。但它不起作用，并在控制台中显示此消息

未捕获到的SyntaxError：意外令牌（

有什么问题吗？这是我的js函数代码：

$('#calendar').fullCalendar(function() {
    eventAfterRender: function(event, element) {
        $(element).tooltip({
            title: event.title,
            container: "body"
        });
    }
});