FullCalendar: настройка календаря

Question

Я новичок в CSS и JQuery.

Мне нужна помощь в настройке полноэкранного отображения. Как изменить цвета границ, фон календаря, добавив удаление «Месяц/День/Неделя» или кнопку?

Это то, что я должен отобразить календарь:

//$('#calendar').fullCalendar() 

var myCalendar = $('#calendar'); 
myCalendar.fullCalendar(); 

// Adding a Simple event 
var myEvent = { 
    title: "New Event Added", 
    allDay: true, 
    start: new Date(), 
    end: new Date() 
};   

myCalendar.fullCalendar('renderEvent', myEvent); 

Answer 1

вы должны изменить в fullcalendar.css есть .fc-header класс, который вы можете редактировать, что в вашем требовании.

Answer 2

Вы должны избегать редактирования fullcalendar.css, так что вы можете обновить CSS при выпуске следующих версий.

Чтобы настроить внешний вид FullCalendar, создайте файл fullcalendar-custom.css, который вы можете использовать для переопределения определенных стилей. Просто включите этот пользовательский файл где-то после fullcalendar.css, т.е .:

<link href="../fullcalendar/fullcalendar.css" rel="stylesheet"> 
<link href="../fullcalendar/fullcalendar-custom.css" rel="stylesheet"> 

Чтобы выяснить, какие стили вам необходимо изменить, вы должны использовать инспектировать элемент в вашем браузере, чтобы выяснить, какие должны быть изменены классы.

Вы можете удалить/изменить кнопки просмотра «Месяц/День/Неделя» при инициализации FullCalendar.

Например, вы могли бы сделать это:

myCalendar.fullCalendar({ 
    header: { 
     left: 'prev,next today title', 
     right: 'month,agendaDay' 
    } 
}); 

Для получения дополнительной информации обратитесь к документации по header и available views.

Answer 3

Вы можете найти эти строки в JS

e.color = event.color; 
e.backgroudColor = event.backgroudColor; 
e.borderColor = event.borderColor; 
e.textColor = event.textColor; 

так, если вы хотите отделить от цветового кода вы можете использовать этот

start: new Date(y, m, d+1, 15, 0), 
end: new Date(y, m, d+1, 16, 45),                      
title: 'On vacations', 
color: '#777777', 
backgroundColor: '#eeeef0'                       

'