完整日历将事件显示为点

5 回答

• 3

  首先，你问题的 Headers Full Calendar get hidden events properties 不是你的确切要求 . 因为在这方面@Mariana已经回答了 .

  您的实际 requirement is to show events as dots 使用完整日历 .

  对此要求的回答是 currently Full Calendar is not providing feature to display events as colored dots .

  但你有以下 alternatives 来达到这个目的：

  • 使用易于使用和集成的Bootstrap Calendar . GitHub

  • 使用Angular Bootstrap Calendar但是为此您需要在项目中使用AngularJS . 您问题中预期输出的屏幕截图来自Angular Bootstrap Calendar .

  • 根据您的要求定制Full Calendar library（当然这是时间考虑而不是一个好的解决方案）

  希望这会帮助你 .

  回复于 2024-05-09T16:38:05+08:00
• 8

  也许，您可以尝试根据视图类型更改事件的样式，而不是获取隐藏事件 . 然后，在月视图事件中将是点 . 你可以使用eventRender回调（https://fullcalendar.io/docs/eventRender）

  您还可以使用 $('#calendar').fullCalendar('clientEvents', filter) （https://fullcalendar.io/docs/clientEvents）过滤当前视图加载的所有客户端事件并获取其属性

  回复于 2024-05-09T16:38:05+08:00
• 2

  不是一个完整的解决方案，但这可能有助于作为快速解决方案，让您在那里的一部分 .

  您可以将“更多”链接转换为相应数量的点，这些点可以作为一组单击以通过执行以下操作来显示弹出窗口：

  设置 eventLimitText: '' 以删除"more"文本（使得从文本中获取事件的数量更容易一些） . 然后，获取所有"more"链接并将它们转换为相关的点数 .

  示例JS：

  $('.fc-more').each((i, elem) => {
    let $elem = $(elem);
    let num = $elem.text();
    num = parseInt(num.substring(1));
    $elem.text('');
    for (let j = 0; j < num; j++) {
      $elem.append('<div class="dot"></div>');
    }
  });
  

  示例CSS：

  .dot {
    background-color: blue;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-radius: 50%;
    display: inline-block;
  }
  

  重要的是要注意，这不会创建一个可单独点击的点，该点对应于与其事件颜色匹配的单个事件 . 获得该解决方案可能并不简单（您可能必须设置 eventLimit: false 并遍历所有 clientEvents 以确定哪些日期有多于您想要的事件，根据事件对象颜色和其他属性将额外事件转换为可单独点击的点，创建自己的popover以便在点击时显示等） .

  回复于 2024-05-09T16:38:05+08:00
• 3

  在这种情况下，完整日历提供事件渲染功能 . 通过事件渲染的所有事件，您必须根据设置点等检查每个事件 .

  eventRender: function(event, element) {
  
      console.log(event);//here each event printed one bu one as render.start 
                          //and end date of event
       if(event.end){
          ///check the start and end date difference
  
         }else {
           //No end date for event       
         }
         if(event.backgroundColor == '#BCE4FD'){
  
             }     }
  

  回复于 2024-05-09T16:38:05+08:00
• 2

  运行代码段，看看这是不是你想要的？

  The CSS part:

  • 我在片段中添加了一些新的CSS，你可以在 /* New CSS */ 之后找到它 . 我注释掉了 #calendar .dot-event ，但您可以通过 .fc-month-view .fc-day .fc-event-dot 设置点样式 . （即我在FullCalendar中使用了现有的圆点样式/ class ）

  The JS part:

  • 我删除了 dayArray ，因为没有必要 . 然后我将 eventLimit 设置为（并且必须是） false . 我也使用 eventAfterRender 而不是 eventAfterAllRender ，我添加的唯一JS是 eventAfterRender 回调函数 .

  The HTML part:

  基本上没有变化 . （通过JavaScript动态更改的除外）

  （您也可以将我的代码段与您的代码段进行比较，看看哪些内容发生了变化 . ）

  $(function() {
  
        var todayDate = moment().startOf('day');
        var YM = todayDate.format('YYYY-MM');
        var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
        var TODAY = todayDate.format('YYYY-MM-DD');
        var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
        var NEXTMONTH = todayDate.clone().add(1, 'month').format('YYYY-MM');
  
        $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
          },
          editable: true,
          eventLimit: false, // Always FALSE
          navLinks: true,
          timeFormat: 'HH:mm',
          slotLabelFormat: 'HH:mm',
          views: {
          basic: {
            // options apply to basicWeek and basicDay views
          },
          agenda: {
            // options apply to agendaWeek and agendaDay views
          },
          week: {
            columnHeaderFormat: 'ddd D',
            titleFormat: 'DD MMM YYYY'
          },
          day: {
            // options apply to basicDay and agendaDay views
          }
        },
          events: [
            {
              title: 'The AI Summit 2016',
              start: YM + '-03',
              end: YM + '-06',
              backgroundColor: "#BCE4FD",
              borderColor: "#26A8FB"
            },
            {
              title: 'Spring 2016',
              start: YM + '-09',
              end: YM + '-14',
              backgroundColor: "#BCE4FD",
              borderColor: "#26A8FB"
            },
            {
              title: 'Virtual Assistant Summit',
              start: YM + '-17',
              end: YM + '-20',
              backgroundColor: "#FFBCBA",
              borderColor: "#D9624F"
            },
            {
              title: "O'Reilly Summit 2016",
              start: YM + '-23',
              end: YM + '-26',
              backgroundColor: "#FFBCBA",
              borderColor: "#D9624F"
            },
            {
              title: 'SIGCHI 2016 Conference',
              start: YM + '-18',
              backgroundColor: "#FFBCBA",
              borderColor: "#D9624F"
            },
            {
              title: 'Les Inggris 2016 Q4',
              start: YM + '-11',
              backgroundColor: "#BCE4FD",
              borderColor: "#26A8FB"
            },
            {
              title: 'Minds Mastering Mac',
              start: YM + '-05',
              end: YM + '-07',
              backgroundColor: "#eee",
              borderColor: "#aaa"
            },
            {
              title: 'AAAI-16',
              start: YM + '-18',
              end: YM + '-20',
              backgroundColor: "#eee",
              borderColor: "#aaa"
            },
            {
              title: 'Service Experience',
              start: YM + '-26',
              end: YM + '-29',
              backgroundColor: "#eee",
              borderColor: "#aaa"
            },
            {
              title: 'Les Bahasa Perancis',
              start: YM + '-26',
              backgroundColor: "#B3EFDA",
              borderColor: "#00c983"
            },
            {
              title: 'SMS Las Vegas 2016',
              start: YM + '-27',
              backgroundColor: "#DACAFD",
              borderColor: "#8652FB"
            },
            {
              title: 'Leadership Training',
              start: YM + '-27',
              backgroundColor: "#DACAFD",
              borderColor: "#8652FB"
            },
            {
              title: 'Leadership Training 2',
              start: YM + '-28',
              end: YM + '-30',
              backgroundColor: "#DACAFD",
              borderColor: "#8652FB"
            },
            {
              title: 'Leadership Camp Winter 2016',
              start: YM + '-27',
              backgroundColor: "#FFBCBA",
              borderColor: "#D9624F"
            },
            {
              title: 'English Course',
              start: YM + '-27',
              backgroundColor: "#FFBCBA",
              borderColor: "#D9624F"
            },
            {
              title: 'Sharing Session Hadoop',
              start: NEXTMONTH + '-02',
              backgroundColor: "#DACAFD",
              borderColor: "#8652FB"
            },
          ],
          eventTextColor: "#333",
          eventAfterRender: function( event, element, view ){
            // Enable for the 'month' view only.
            if ( 'month' !== view.name ) {
              return;
            }
  
            var a = moment( event.start, 'YYYY-MM-DD' ),
              b = moment( event.end, 'YYYY-MM-DD' ),
              duration = moment.duration( b.diff( a ) ),
              row = element.closest( '.fc-row' ),
              d = a.clone(), i, c;
  
            var title = event.title;
            if ( b.isValid() ) {
              title += ' (' + $.fullCalendar.formatRange( a, b, 'MMM D YYYY' ) + ')';
            }
  
            // Add the event's "dot", styled with the appropriate background color.
            for ( i = 0; i <= duration._data.days; i++ ) {
              if ( 0 === 1 ) {
                c = a;
              } else {
                d.add( 1, 'days' );
                c = d;
              }
  
              row.find( '.fc-day[data-date="' + c.format( 'YYYY-MM-DD' ) + '"]' )
                .append(
                  '<a href="#" class="fc-event-dot" onclick="return false;" ' +
                    'style="background-color: ' + event.backgroundColor + ';" ' +
                    'title="' + title + '"></a>'
                );
            }
  
            // Here you can either completely remove the default element, or just
            // hide it visually on screen.
            element.remove();
            //element.addClass( 'hidden' );
          }
            });
      });
  

  #calendar table {
    display: table;
    border: none !important;
  }
  
  .calendar-example {
    line-height: 1.3;
  }
  
  .calendar-example h2 {
    font-size: 22px;
  }
  
  .calendar-example a[data-goto] {
    color: #444;
  }
  
  .fc-title {
    font-size: 12px !important; 
  }
  
  .fc-center h2 {
   font-size: 22px; 
   color: #00c983;
   font-weight: 400;
  }
  
  #calendar thead {
    border: none !important; 
  }
  
  .fc-day-header {
    border: none !important;
    font-size: 13px;
  }
  
  .fc-head {
    line-height: 40px;
    border: none !important;
  }
  
  .fc-body {
    background-color: #f8f8f8;
  }
  
  .fc-day {
    /*border-left: none !important;
    border-right: none !important;*/
  }
  
  .fc-head-container {
    /*border-right: none !important;
    border-left: none !important;*/
  }
  
  .fc-day-number {
    font-size: 13px;
    margin-right: 4px;
    margin-top: 4px;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    line-height: 24px;
    text-align: center;
    color: #777;
  }
  
  .fc-day-number:hover {
    text-decoration: none !important;
    color: #777;
  }
  
  .fc-today {
    background-color: #E6FAF3 !important; 
  }
  
  .fc-today .fc-day-number {
    background-color: #00c983; 
    font-weight: 700;
    color: #fff;
  }
  
  .fc-widget-content {
    border-right: solid 8px #f8f8f8 !important;
    border-left: solid 8px #f8f8f8 !important;
  }
  
  .fc-more-cell > div {
   text-align: right;
    margin-right: 8px;
    font-size: 14px;
    color: #777;
  }
  
  .fc-more-cell > div > a:hover {
    text-decoration: none;
    color: #333;
  }
  
  .fc-content {
    padding: 1px 4px;
  }
  
  .fc-widget-header {
    border: none !important; 
  }
  
  .fc-time {
    font-size: 12px;
    font-weight: 700;
  }
  
  .fc-time.fc-widget-content {
    border: none;
  }
  
  .fc-time-grid .fc-slats .fc-minor td {
    border-top-style: none !important; 
  }
  
  .fc-axis.fc-time.fc-widget-content {
    transform: translate(-8px, -12px);
  }
  
  .fc-popover.fc-more-popover,
  .fc-popover.fc-more-popover .fc-widget-header,
  .fc-popover.fc-more-popover .fc-widget-content {
    background-color: #fff !important; 
  }
  
  .fc-axis.fc-widget-content {
    font-size: 12px;
    font-weight: 700;
  }
  
  /*#calendar .dot-event {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: inline-block;
      margin-left: 10px;
      vertical-align: text-bottom;
  }*/
  
  .red {
    width: 10px;
    height: 10px;
    background-color: "#000";
  }
  
  /* New CSS */
  
  .fc-month-view .fc-row .fc-day {
    /* Aligns the event dots at the bottom of the cell. */
    vertical-align: bottom;
  }
  
  .fc-month-view .fc-day .fc-event-dot {
    cursor: default;
    /* Gives some spacing between the dots in a cell. */
    margin-right: 2px;
  }
  
  .fc-month-view .hidden {
    display: none;
  }
  

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
  
  <h3>Hover over the dot.</h3>
  
  <div id="calendar"></div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
  

  回复于 2024-05-09T16:38:05+08:00