は、どのように私は、画像下のようなイベントの数だけを設定し、カレンダーの日を作りたいデイエリア内のイベントの数だけ

I`mのbegginerを設定し、FullCalendar.jsには、どのように私は、画像下のようなイベントの数だけを設定し、カレンダーの日を作りたいデイエリア内のイベントの数だけ

を使用することができます。

私はeventLimitオプションを使用しました。しかし、0値は私が期待したよりもうまく機能しません。

私は1にeventLimitを設定しても、これは関係なく、私は何をすべきか、イベント名を示していません。

どのように日中のイベントの数だけを設定できませんか？

https://fullcalendar.io/docs/display/eventLimit/

<!DOCTYPE html> 
<html lang="kr"> 
<head> 
<meta charset="UTF-8"> 
<title>calendar</title> 
<link rel='stylesheet' href='./js/jquery/fullcalendar.css' /> 
<style> 
    .fc-sat { 
     background-color: blue; 
    } 

    .fc-sun { 
     background-color: red; 
    } 
</style> 

<script src="./js/jquery/jquery-3.2.1.min.js"></script> 
<script src='./js/jquery/moment.min.js'></script> 
<script src='./js/jquery/fullcalendar.js'></script> 
<script src='./js/jquery/ko.js'></script> 
<script> 
    $(document).ready(function() { 

     // page is now ready, initialize the calendar... 

     $('#calendar').fullCalendar({ 
      // put your options and callbacks here 
      locale: 'ko', 
      header : { 
       left: '', 
       center: 'prev title next', 
       right: 'today' 
      }, 
      eventLimit: 1, // for all non-agenda views 
      eventLimitText: "더보기", 
      theme: false, // using jquery-ui theme, default: false 
      events: [{ 
       title: 'All Day Event', 
       start: '2017-08-01' 
      }, { 
       title: 'Long Event', 
       start: '2017-08-07', 
       end: '2017-08-10' 
      }, { 
       // id: 999, 
       title: 'Repeating Event', 
       start: '2017-08-09T16:00:00' 
      }, { 
       // id: 999, 
       title: 'Repeating Event', 
       start: '2017-08-16' 
      }, { 
       title: 'Meeting', 
       start: '2017-08-12T10:30:00', 
       end: '2017-08-12T12:30:00' 
      }, { 
       title: 'Lunch', 
       start: '2017-08-12T12:00:00' 
      }, { 
       title: 'Birthday Party', 
       start: '2017-08-13T07:00:00' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }] 
     }) 

    }); 
</script> 
</head> 
    <body> 
     <div id="content" style="width : 900px;"> 
      <div id="calendar" /> 
     </div> 
    </body> 
</html>

出典

2017-08-30 yhlee

を行います。現在のAPIはサポートしていません。おそらく 'eventLimit：0'はあなたが期待することを行うべきです。可能であれば、コードがfalse-yとして評価されている可能性があります（ソースコードをチェックして、==または===を使ってテストするかどうかを確認できます）。修正方法を理解していれば、メンテナにパッチを提出できます。。あなたはそれが唯一のマークは、日付、終了日を開始し、開始日と終了日の 'tの間にマークされ、バグ（両方とも私は信じて、GitHubの上で行う） – ADyson

あなたはeventRenderとeventAfterAllRenderコールバックを使用してこれを行うことができます。

Working JSFiddle。

私はあなたがおそらく多くを行うことになるでしょう、デモの目的のために表示された回数の非常に基本的なスタイリングを行ってきました。あなたのJavaScriptで

どこか私たちは、後でそれを見つけることができ、あなたのイベントにタグを付ける機能を追加します。

function flagEvent(event, element) { 
    element.addClass('event-on-' + event.start.format('YYYY-MM-DD')) 
      .css('display', 'none'); 
}

を次に、あなたのFullcalendarのinitコードに次の2つのコールバックを追加します。

eventRender: function(event, element) { 
    // When rendering each event, add a class to it, so you can find it later. 
    // Also add css to hide it so it is not displayed. 
    // Note I used a class, so it is visible in source and easy to work with, but 
    // you can use data attributes instead if you want. 

    flagEvent(event, element); 

    if (event.end && event.start.format('YYYY-MM-DD') !== event.end.format('YYYY-MM-DD')) { 
     while (event.end > event.start) { 
      event.start.add(1, 'day'); 
      console.log('flag', event.start.format('YYYY-MM-DD')) 
      flagEvent(event, element); 
     } 
    } 
}, 
eventAfterAllRender: function (view) { 
    // After all events have been rendered, we can now use the identifying CSS 
    // classes we added to each one to count the total number on each day. 
    // Then we can display that count. 
    // Iterate over each displayed day, and get its data-date attribute 
    // that Fullcalendar provides. Then use the CSS class we added to each event 
    // to count the number of events on that day. If there are some, add some 
    // html to the day cell to show the count. 

    $('#calendar .fc-day.fc-widget-content').each(function(i) { 
     var date = $(this).data('date'), 
      count = $('#calendar a.fc-event.event-on-' + date).length; 
     if (count > 0) { 
      $(this).html('<div class="fc-event-count">+' + count + '<div>'); 
     } 
    }); 
},

出典

2017-09-02 10:21:36

を上げるが、可能性があり、私が見る – yhlee

@yhlee - 。それを処理するように更新答えを。あまりに更新 –

@yhlee JSFiddle –

Iこのコードをlitteに修正しました。私は値を下回って追加する場合、このコードが正しく

{ 
title: 'Dummy', 
url: 'http://google.com/', 
start: '2017-09-04', 
end: '2017-09-25' 
}

動作しないので、私は残念ながら、このようにあなたがすることはできません

<!DOCTYPE html> 
<html lang="kr"> 
<head> 
<meta charset="UTF-8"> 
<title>calendar</title> 
<link rel='stylesheet' href='./css/fullcalendar/fullcalendar.css' /> 
<style> 
    .fc-sat { 
     background-color: blue; 
    } 

    .fc-sun { 
     background-color: red; 
    } 

    .fc-event-count { 
     color: green; 
     font-size: large; 
    } 
    .fc-event-container { 
     display : none; 
    } 
</style> 

<script src="./js/jquery/jquery-3.2.1.min.js"></script> 
<script src='./js/fullcalendar/moment.min.js'></script> 
<script src='./js/fullcalendar/fullcalendar.js'></script> 
<script src='./js/fullcalendar/ko.js'></script> 
<script> 
$(document).ready(function() { 

    // page is now ready, initialize the calendar... 

    function flagEvent(event, element) { 
    element.addClass('event-on-' + event.start.format('YYYY-MM-DD')) 
     .css('display', 'none'); 
    } 

    $('#calendar').fullCalendar({ 
    // put your options and callbacks here 
    header: { 
     left: '', 
     center: 'prev title next', 
     right: 'today' 
    }, 
    eventLimit: false, 
    eventRender: function(event, element) { 
     // When rendering each event, add a class to it, so you can find it later. 
     // Also add css to hide it so it is not displayed. 
     // Note I used a class, so it is visible in source and easy to work with, but 
     // you can use data attributes instead if you want. 
     console.log('flag', event.start.format('YYYY-MM-DD')) 


     console.log(event.start.format('YYYY-MM-DD')); 
     if (event.end) {console.log(event.end.format('YYYY-MM-DD'))}; 

     if (event.end && event.start.format('YYYY-MM-DD') !== event.end.format('YYYY-MM-DD')) { 
     while (event.end >= event.start) { 
      console.log('flag', event.start.format('YYYY-MM-DD')) 

      flagEvent(event, element); 
      event.start.add(1, 'day'); 
     } 
     } else { 
      flagEvent(event, element); 
     } 
    }, 
    eventAfterAllRender: function(view) { 
     // After all events have been rendered, we can now use the identifying CSS 
     // classes we added to each one to count the total number on each day. 
     // Then we can display that count. 
     // Iterate over each displayed day, and get its data-date attribute 
     // that Fullcalendar provides. Then use the CSS class we added to each event 
     // to count the number of events on that day. If there are some, add some 
     // html to the day cell to show the count. 

     $('#calendar .fc-day.fc-widget-content').each(function(i) { 
     var date = $(this).data('date'); 
     var count = $('#calendar a.fc-event.event-on-' + date).length; 

     if (count > 0) { 
      $(this).html('<div class="fc-event-count">+' + count + '<div>'); 
     } 
     }); 
    }, 
    events: [ { 
     title: 'Click for Google', 
     url: 'http://google.com/', 
     start: '2017-09-01' 
    }, { 
     title: 'Click for Google', 
     url: 'http://google.com/', 
     start: '2017-09-19' 
    }, { 
     title: 'Dummy', 
     url: 'http://google.com/', 
     start: '2017-09-04', 
     end: '2017-09-15' 
    },{ 
     title: 'Dummy', 
     url: 'http://google.com/', 
     start: '2017-09-08', 
     end: '2017-09-09' 
    }] 
    }) 
}); 
</script> 
</head> 
<body> 
<div id="content" style="width : 900px;"> 


    <div id="calendar" /> 
</div> 
</body> 
</html>

出典

2017-09-05 09:16:24 yhlee

と、このコードはローカルではうまく動作しますが、フィドルでうまく動作しません。理由がわかりません – yhlee

は、どのように私は、画像下のようなイベントの数だけを設定し、カレンダーの日を作りたいデイエリア内のイベントの数だけ

答えて

関連する問題