完整的日历显示事件为点

时间：2018-08-01 21:14:52

标签： javascript jquery html css fullcalendar

我正在尝试使用“完整日历”修改日历的设计。我要实现的是按原样显示可以放在日历上的可见事件，将隐藏事件（折叠成“ +2更多”的事件）显示为点。到目前为止的样子：

var dayArray = [];

$(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: true, // allow "more" link when too many events
    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",
    /*
    eventAfterAllRender: function() {
        
        var events = $('#calendar').fullCalendar('clientEvents');
        console.log(events);
        
        //get all dates with events
        var startDateWithEvent = [];
        var endDateWithEvent = [];
        for (var i = 0; i < events.length; i++) {
          startDateWithEvent[i] = events[i].start._i;
          endDateWithEvent[i] = events[i].end._i;
        }
        startDateWithEvent = startDateWithEvent.push(endDateWithEvent);
        var dateWithEvent = startDateWithEvent.filter(function(item, pos) {
          return startDateWithEvent.indexOf(item) == pos;
        });
        console.log(dateWithEvent);
      
        //get event colors of each date
        for (var i = 0; i < dateWithEvent.length; i++) {
          for (var j = 0; j < events.length; j++) {
            if (dateWithEvent[i] == events[j].start._i) {
              var eventObject = {};
              eventObject.date = dateWithEvent[i];
              eventObject.title = events[j].title;
              eventObject.backgroundColor = events[j].backgroundColor;
              eventObject.borderColor = events[j].borderColor;
              dayArray.push(eventObject);
            }
          }
        }
      
        //get hidden only events
        for (var i = 0; i < dayArray.length; i++) {
          
        }
    }*/
  });
});
#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";
}
<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">

<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>

是否可以获取每个隐藏事件的属性（尤其是轮廓和背景颜色）？因为我想将隐藏事件表示为点，所以就像这样：

enter image description here

我尝试使用var events = $('#calendar').fullCalendar('clientEvents');检索所有事件，但是看不到任何能区分隐藏事件和可见事件的东西。文档上几乎没有任何内容可以帮助我解决此问题。

如果这不可能，至少请给我一个想法，如何仅在移动/较小的屏幕上将所有事件转换为点。暂时无法更改FullCalendar的.js，因为我想在片段中显示它。另外，每天有什么方法可以收集事件吗？也许我可以去那里。

对于不好的代码，我感到抱歉，因为我不是开发人员，这是我第一次使用此插件。任何帮助表示赞赏，谢谢！ ：）

5 个答案:

答案 0 :(得分：8)

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

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

答案 1 :(得分：4)

运行摘要，看看是否正是您想要的？

CSS部分：

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

JS部分：

  1. 我删除了dayArray，因为它不是必需的。然后，将eventLimit设置为false（必须是eventAfterRender）。我还使用了eventAfterAllRender和 not eventAfterRender，并且我添加的唯一JS在$(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' ); } }); });回调函数中。

HTML部分：

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

（您也可以将我的代码段与您的代码段进行比较，以查看发生了什么变化。）

#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>
let(:vanity_url) { 'https://vanity.url' }
let(:partner_campaigns) { double('partner_campaigns') }
let(:loaded_partner_campaigns) { double('loaded_partner_campaigns') }

let(:partner_campaign) do
  double("Contentful::Model", fields {:promotion_type => "Promotion 1"}
end

before do
  allow(Contentful::PartnerCampaign)
    .to receive(:find_by)
    .with(vanity_url: vanity_url)
    .and_return(partner_campaigns)

  allow(partner_campaigns)
    .to receive(:load)
    .and_return(loaded_partner_campaigns)

  allow(loaded_partner_campaigns)
    .to receive(:first)
    .and_return(partner_campaign)
end

答案 2 :(得分：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'){

           }     }

答案 3 :(得分：2)

首先要回答的问题是 “完整日历获取隐藏的事件”属性 。因为在这方面，@ Mariana已经回答了。

您的实际要求是使用完整日历将事件显示为点。

此要求的答案是当前Full Calendar未提供将事件显示为彩色点的功能。

但是您可以通过以下替代方案来实现这一目标：

  1. 使用Bootstrap Calendar，它也易于使用和集成。 GitHub
  2. 使用Angular Bootstrap Calendar，但是为此您需要在项目中使用AngularJS。 您的问题中预期输出的屏幕截图来自Angular Bootstrap日历。
  3. 根据您的要求自定义Full Calendar library（当然，这很花时间，不是一个好的解决方案）

希望这会对您有所帮助。

答案 4 :(得分：2)

这不是一个完整的解决方案，但这可以帮助您快速解决问题，

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

设置eventLimitText: ''可以删除“更多”文本（使从文本中获取事件数更加容易）。然后，获取所有“更多”链接并将其转换为相应数量的点。

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才能确定哪一天发生的事件比您想要的多，将额外的事件转换为基于事件对象的颜色和其他属性，创建您自己的弹出窗口以在点击时显示，等等）。

相关问题
最新问题