web-dev-qa-db-ja.com

フルカレンダーはイベントをドットで表示します

フルカレンダーを使用してカレンダーのデザインを変更しようとしています。達成したいのは、カレンダーに収まる可視イベントをそのまま表示し、非表示のイベント（「+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を変更することは、スニペットに表示したいので、現時点では可能な解決策ではありません。また、毎日イベントを収集する方法はありますか？たぶんそこから行くことができます。

私は開発者ではないので、悪いコードで申し訳ありません。このプラグインを使用するのは初めてです。助けてくれてありがとう、ありがとう！ :)

javascriptjqueryhtmlcssfullcalendar
23
Dolorosa

非表示のイベントを取得する代わりに、ビューのタイプに基づいてイベントのスタイルを変更することもできます。その後、月のビューイベントはドットになります。 eventRenderコールバックを使用できます（ https://fullcalendar.io/docs/eventRender ）

また、現在のビューによってロードされたすべてのクライアントイベントをフィルタリングし、$('#calendar').fullCalendar('clientEvents', filter)（ https://fullcalendar.io/docs/clientEvents ）を使用してそのプロパティを取得することもできます。

8
Mariana Bianchi Marques

スニペットを実行し、それがあなたが望むものであるかどうかを確認しますか？

CSSパーツ：

  1. スニペットの/* New CSS */の後にある新しいCSSを追加しました。 #calendar .dot-eventをコメントアウトしましたが、.fc-month-view .fc-day .fc-event-dotを使用してドットのスタイルを設定できます。 （つまり、FullCalendarで既存のドットスタイル/ classを使用しました）

JSパート：

  1. dayArrayは必要ないので削除しました。次に、eventLimitをfalseに設定します（そうでなければなりません）。 eventAfterRenderとnoteventAfterAllRenderも使用しましたが、追加したJSはeventAfterRenderコールバック関数のみです。 。

HTMLパーツ：

基本的には変更なし。（JavaScriptを介して動的に変更されるものを除く）

（また、compareスニペットをあなたのものと比較して、何が変わったかを見ることができます。）

$(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>
4
Sally CJ

この状況では、フルカレンダーはイベントレンダー機能を提供します。イベントレンダーを通過するすべてのイベントは、ドットなどの設計に基づいて各イベントをチェックする必要があります。

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

完全な解決策ではありませんが、これはそこへの道の一部を取得する迅速な修正として役立つ場合があります。

「その他」リンクを対応する数のドットに変換し、グループとしてクリックしてポップオーバーを表示するには、次のようにします。

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をループして、必要なイベントが多い日を判断し、追加のイベントを個別にクリック可能なドットに変換する必要があるかもしれませんイベントオブジェクトの色やその他のプロパティで、クリックなどで表示するための独自のポップオーバーを作成します。

2
benvc

質問のすべてのタイトルの最初完全なカレンダーの非表示のイベントを取得するプロパティはあなたの正確な要件ではありません。この点で@Marianaはすでに答えているからです。

実際の要件は、フルカレンダーを使用してイベントをドットで表示することです。

この要件に対する答えは、現在 フルカレンダー はイベントを色付きのドットとして表示する機能を提供していないということです。

しかし、これを達成するために以下のalternativesがあります：

  1. Bootstrap Calendar を使用します。これは使いやすく、統合も簡単です。 GitHub
  2. Angular Bootstrap Calendar を使用しますが、そのためにはプロジェクトでAngularJSを使用する必要があります。 質問で予想される出力のスクリーンショットは、Angular Bootstrap Calendarからのものです。
  3. カスタマイズ フルカレンダーライブラリ 要件に従って（もちろん、これは時間がかかり、良い解決策ではありません）

これがお役に立てば幸いです。

2
VicJordan