Calendario - календар для вашого сайту

Calendario - календар для вашого сайту

Сьогодні ми хочемо з вами поділитися концепцією гнучкого, що настроюється календаря. Ми створили jQuery-плагін для календаря, і в цій статті ви можете побачити пару прикладів того, як можна його використовувати. Мета створення плагіна була в тому, щоб забезпечити найкраще розташування календаря як на малих, так і на великих екранах і зберегти при цьому "плаваючу" структуру календаря, коли це можливо.

Зверніть увагу, що демо-приклади будуть працювати, як задумано, тільки в браузерах, які підтримують нові властивості CSS3, які використовуються тут, в першу чергу calc ().

Календар створений на основі цих двох красивих прикладів, знайдених на Dribbble:

• День - найкрасивіший календар-додаток для iPhone від Toby Negele
• Календар від Tomas Gajar

Для роботи плагіна, нам просто потрібно створити контейнер з класом "fc-calendar-container":

Плагін може бути викликаний наступним чином:

$ # 40; '#calendar' # 41 ;. calendario # 40; # 41; ;

Після чого плагін створює розмітку календаря з наступною структурою:

Календар буде складатися з шапки для списку днів тижня і контейнера з рядами днів місяця. Кожна «осередок» буде містити дату і день тижня, і ми будемо контролювати висоту рядка, встановивши потрібний клас для контейнера (чотири, п'ять або шість рядків). Стилі для календаря, за замовчуванням, визначаються в calendar.css.

Зверніть увагу, що осередок, яка містить контент / подія, буде виглядати наступним чином:

Також зверніть увагу, що дні тижня в кожному осередку приховано за замовчуванням, тому що у нас є в календарі шапка з днями тижня. Ті, що в осередку показуються, коли ми застосовуємо media queries, щоб змінити макет календаря на вертикальний. Тут ми показуємо дні тижня в кожному осередку.

Зрозуміло, що календар може / повинен бути представлений як таблиця, але через деякий різниці при рендеринге таблиць між браузерами (особливо IE9), ми вирішили не використовувати її. Звичайно, Ви можете самі налаштувати плагін для виведення таблиці.

Важливою частиною створення "плаваючою" сітки календаря є стилі рядків і осередків:

fc-four-rows .fc-row # 123;
height. 25%;
# 125;

fc-five-rows .fc-row # 123;
height. 20%;
# 125;

fc-six-rows .fc-row # 123;
height. 16.66%;
height. -moz-calc # 40; 100% / 6 # 41; ;
height. -webkit-calc # 40; 100% / 6 # 41; ;
height. calc # 40; 100% / 6 # 41; ;
# 125;

fc-calendar .fc-row> div.
.fc-calendar .fc-head> div # 123;
float. left;
height. 100%;
width. 14.28%; / * 100% / 7 * /
width. -moz-calc # 40; 100% / 7 # 41; ;
width. -webkit-calc # 40; 100% / 7 # 41; ;
width. calc # 40; 100% / 7 # 41; ;
position. relative;
# 125;

Таким чином, ми визначаємо різну висоту календаря в залежності від кількості рядків, використовуючи calc (). Для внутрішніх блоків ми встановимо ширину рівну 100 розділене на 7 - calc (100% / 7).

В наявності є таке (за замовчуванням) параметри:

// ініціалізація календаря для місяця (1-12). За замовчуванням поточний.
month. null.

// ініціалізація календаря для року. За замовчуванням поточний.
year. null.

// вибір між значеннями options.weeks і options.weekabbrs
displayWeekAbbr. false.

// вибір між значеннями options.months і options.monthabbrs
displayMonthAbbr. false.

// перший день тижня
// 0 - Sunday, 1 - Monday. 6 - Saturday
startIn. 1.

// callback-функція, викликається коли ви натискаєте на осередок
// $ el - це осередок
// $ content - це контент в осередку
// dateProperties - це об'єкт з наступними параметрами:
// day. номер дня,
// month. номер місяця, від 1 - 12,
// monthname. назва місяця з options.months,
// year. рік,
// weekday. день тижня, від 0 - 6,
// weekdayname. назва дня тижня, з options.weeks
onDayClick. function # 40; $ El. $ Content. dateProperties # 41; # 123; return false; # 125;

Також доступні наступні паблік-методи:

// повертає рік, який в даний час переглядають
getYear # 40; # 41;

// повертає місяць, який в даний час переглядають (1-12)
getMonth # 40; # 41;

// повертає назву місяця, який в даний час переглядають
getMonthName # 40; # 41;

// повертає вміст комірки "day"
getCell # 40; day # 41;

// встановлює дані в календарі. Об'єднує вміст "caldata" з тими, які вже встановлені (якщо такі є)
setData # 40; caldata # 41;

// Показує календар для поточного місяця і року
// Місяць від 1-12
gotoNow # 40; callback # 41;

// Показує календар для місяця "month" і року "year"
// Місяць від 1-12
goto # 40; month. year. callback # 41;

// повертає попередній місяць в календарі
gotoPreviousMonth # 40; callback # 41;

// повертає попередній рік в календарі
gotoPreviousYear # 40; callback # 41;

// повертає наступний місяць в календарі
gotoNextMonth # 40; callback # 41;

// повертає наступний рік в календарі
gotoNextYear # 40; callback # 41;

Ви можете використовувати функцію SetData. щоб додати контент в календар. Як це буде виглядати Ви можете побачити в демо-прикладах.

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