Как настроить fullcalendar, календарь событий javascript?

Question

Я новичок в разработке javascript и в Интернете.

Итак, я использовал библиотеку fullcalendar (https://fullcalendar.io/), чтобы создать представление календаря, и я задаюсь вопросом, могу ли я сам его настроить.

Это мой Markup код:

<div id="blueBackground"> 
    <div class="container"> 
     <div id='calendar'></div> 
    </div> 
</div> 

Таким образом, «blueBackground» для изменения всей веб-страницы фон в синий цвет. Класс «контейнер», если для изменения размера календаря до более подходящего вида.

Это код Javascript:.

$(document).ready(function() { 

    // page is now ready, initialize the calendar... 
    $('#calendar').fullCalendar({ 
     // put your options and callbacks here  
    }) 

}); 

Javascript код прямо из fullcalendar страницы Использование (https://fullcalendar.io/docs/usage/)

Итак, как я могу настроить его? Я полный новичок в javascript. Я смотрю на другие вопросы, подобные этому, но он не имеет плодов. Я не могу заставить его работать.

Заранее спасибо.

Answer 1

В настоящее время я также использую fullcalendar и вот некоторые настройки я сделал:

$(document).ready(function() { 
    // page is now ready, initialize the calendar... 
    $('#calendar').fullCalendar({ 
     //Changing the header like this: 
     header: 
     { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 

     //Lets us edit in the calendar 
     editable: true, 


     //When u select some space in the calendar do the following: 
     select: function(start, end, allDay){ 
      //do something when space selected 
     }, 


     //When u click on an event in the calendar do the following: 
     eventClick: function(event, element) { 
      //do something when event clicked 
     }, 


     //When u drop an event in the calendar do the following: 
     eventDrop: function(event, delta, revertFunc) { 
      //do something when event is dropped at a new location 
     }, 


     //When u resize an event in the calendar do the following: 
     eventResize: function(event, delta, revertFunc) { 
      //do something when event is resized 
     }, 


     //Add some test events. 
     events: [ 
     { 
      title : 'event1', 
      start : '2016-09-15' 
     }, 
     { 
      title : 'event2', 
      start : '2016-09-15', 
      end : '2016-09-16' 
     }, 
     { 
      title : 'event3', 
      start : '2016-09-15T12:30:00', 
      allDay : false // will make the time show 
     } 
     ] 
    }) 
}); 

В моем проекте я также использовать PHP и MySQL для хранения и изменить события. Иначе почти все настройки вы можете сделать это listed in the docs.

EDIT # 1 Здесь идет, как изменить основные настройки цвета и т.д.: Изменение цвета отверстия фона:

<div id="calendar" style="background:#de1f1f;"></div> 

Изменение цвета фона событий (когда у перетащить новое событие фон не синий больше, но красный):

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     eventBackgroundColor: "#de1f1f" 
    }); 
}); 

Изменение цвета событий (не синий больше, но красный):

$('#calendar').fullCalendar({ 
    events: [ 
     // my event data 
    ], 
    eventColor: "#de1f1f" 
}); 

Изменение цвета границы для событий:

$('#calendar').fullCalendar({  
    eventBorderColor: "#de1f1f" 
}); 

Надежда, что топленое лишь некоторые из настройки вы можете сделать, теперь в том числе, как стиль его :)