編集 Github

フルカレンダー v3.9.0 - プロ 成分

フルカレンダーのデザインを作成しました。 色、タイポグラフィ、ボタンを変更したため、ダッシュボードの残りの部分のように見えます。

詳細については確認してください FullCalendar.

これがコード例です。:

<div id="fullCalendar"></div>
$calendar = $('#fullCalendar');

today = new Date();
y = today.getFullYear();
m = today.getMonth();
d = today.getDate();

$calendar.fullCalendar({
    viewRender: function(view, element) {
        // We make sure that we activate the perfect scrollbar when the view isn't on Month
        if (view.name != 'month'){
            $(element).find('.fc-scroller').perfectScrollbar();
        }
    },
    header: {
left: 'title',
center: 'month,agendaWeek,agendaDay',
right: 'prev,next,today'
},
defaultDate: today,
selectable: true,
selectHelper: true,
    views: {
        month: { // name of view
            titleFormat: 'MMMM YYYY'
            // other view-specific options here
        },
        week: {
            titleFormat: " MMMM D YYYY"
        },
        day: {
            titleFormat: 'D MMM, YYYY'
        }
    },

select: function(start, end) {

        // on select we show the Sweet Alert modal with an input
swal({
    title: 'Create an Event',
    html: '<div class="form-group">' +
                    '<input class="form-control" placeholder="Event Title" id="input-field">' +
                '</div>',
    showCancelButton: true,
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
            buttonsStyling: false
        }).then(function(result) {

            var eventData;
            event_title = $('#input-field').val();

            if (event_title) {
      eventData = {
        title: event_title,
        start: start,
        end: end
      };
      $calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
    }

    $calendar.fullCalendar('unselect');

        });
},
editable: true,
eventLimit: true, // allow "more" link when too many events


    // color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
    events: [
{
  title: 'All Day Event',
  start: new Date(y, m, 1),
            className: 'event-default'
},
{
  title: 'Meeting',
  start: new Date(y, m, d-1, 10, 30),
  allDay: false,
  className: 'event-green'
},
{
  title: 'Lunch',
  start: new Date(y, m, d+7, 12, 0),
  end: new Date(y, m, d+7, 14, 0),
  allDay: false,
  className: 'event-red'
},
{
  title: 'Nud-pro Launch',
  start: new Date(y, m, d-2, 12, 0),
  allDay: true,
  className: 'event-azure'
},
{
  title: 'Birthday Party',
  start: new Date(y, m, d+1, 19, 0),
  end: new Date(y, m, d+1, 22, 30),
  allDay: false,
            className: 'event-azure'
},
{
  title: 'Click for Creative Tim',
  start: new Date(y, m, 21),
  end: new Date(y, m, 22),
  url: 'http://www.creative-tim.com/',
  className: 'event-orange'
},
{
  title: 'Click for Google',
  start: new Date(y, m, 21),
  end: new Date(y, m, 22),
  url: 'http://www.creative-tim.com/',
  className: 'event-orange'
}
]
});