Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andrey-tech/calendar-js

Класс Calendar. Формирует НTML-код календаря на год или на месяц с версткой CSS Grid Layout.
https://github.com/andrey-tech/calendar-js

calendar css-grid-layout cssgrid grid-layout javascript jquery js

Last synced: 28 days ago
JSON representation

Класс Calendar. Формирует НTML-код календаря на год или на месяц с версткой CSS Grid Layout.

Host: GitHub
URL: https://github.com/andrey-tech/calendar-js
Owner: andrey-tech
License: mit
Created: 2020-06-16T08:33:13.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2021-02-28T09:02:53.000Z (over 3 years ago)
Last Synced: 2024-10-09T19:55:10.260Z (about 1 month ago)
Topics: calendar, css-grid-layout, cssgrid, grid-layout, javascript, jquery, js
Language: JavaScript
Homepage:
Size: 196 KB
Stars: 1
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Calendar JS

![Calendar JS logo](./assets/calendar-logo.png)

Класс Calendar. Формирует НTML-код календаря на год или на месяц с версткой CSS Grid Layout.

## Содержание

- [Требования](#%D0%A2%D1%80%D0%B5%D0%B1%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)

- [Класс Calendar](#%D0%9A%D0%BB%D0%B0%D1%81%D1%81-calendar)

  - [Методы класса](#%D0%9C%D0%B5%D1%82%D0%BE%D0%B4%D1%8B-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0)

  - [Дополнительные параметры](#%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B)

  - [HTML-представление дней календаря](#html-%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B4%D0%BD%D0%B5%D0%B9-%D0%BA%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8F)

  - [Примеры](#%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B)

    - [Календарь на текущий год](#%D0%9A%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BA%D1%83%D1%89%D0%B8%D0%B9-%D0%B3%D0%BE%D0%B4)

    - [Календарь на заданный год](#%D0%9A%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C-%D0%BD%D0%B0-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9-%D0%B3%D0%BE%D0%B4)

    - [Календарь на текущий месяц текущего года](#%D0%9A%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BA%D1%83%D1%89%D0%B8%D0%B9-%D0%BC%D0%B5%D1%81%D1%8F%D1%86-%D1%82%D0%B5%D0%BA%D1%83%D1%89%D0%B5%D0%B3%D0%BE-%D0%B3%D0%BE%D0%B4%D0%B0)

    - [Календарь на заданный месяц заданного года](#%D0%9A%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C-%D0%BD%D0%B0-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9-%D0%BC%D0%B5%D1%81%D1%8F%D1%86-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%BD%D0%BE%D0%B3%D0%BE-%D0%B3%D0%BE%D0%B4%D0%B0)

    - [HTML-код страницы календаря](#html-%D0%BA%D0%BE%D0%B4-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D0%BA%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8F)

    - [Формируемый HTML-код календаря на месяц](#%D0%A4%D0%BE%D1%80%D0%BC%D0%B8%D1%80%D1%83%D0%B5%D0%BC%D1%8B%D0%B9-html-%D0%BA%D0%BE%D0%B4-%D0%BA%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8F-%D0%BD%D0%B0-%D0%BC%D0%B5%D1%81%D1%8F%D1%86)

- [Автор](#%D0%90%D0%B2%D1%82%D0%BE%D1%80)

- [Лицензия](#%D0%9B%D0%B8%D1%86%D0%B5%D0%BD%D0%B7%D0%B8%D1%8F)



## Требования

- [jQuery](https://jquery.com/)

- Веб-браузер, [поддерживающий](https://caniuse.com/#feat=css-grid) спецификацию [CSS Grid Layout (level 1)](https://www.w3.org/TR/css-grid-1/):

    - Google Chrome >= 57

    - Mozilla Firefox >= 52

    - Apple Safari >= 10.1

    - Microsoft Edge >= 16

    - Opera >= 68



## Класс Calendar



### Методы класса

- `construct(fullYear)` Конструктор класса.

    + `fullYear` - четырёхзначный номер года (например, 2021).  

       Если номер года не передан, то будет использован текущий год.

- `getMonthHTML(month)` Возвращает HTML представление месяца в виде обернутого набора jQuery.

    + `month` -  номер месяца (например, 1); **нумерация месяцев начинается с нуля (0 - январь, 11 - декабрь)**.  

       Если номер месяца не передан, то будет использован текущий месяц.

- `getYearHTML()` Возвращает HTML представление года в виде обернутого набора jQuery.



### Дополнительные параметры

Дополнительные параметры работы устанавливаются через свойства объекта класса `Calendar`.

Свойство                | По умолчанию     | Описание

----------------------- | ---------------- | --------

`showYearTitle`         | false            | Включает отображение заголовка года

`showMonthTitle`        | true             | Включает отображение заголовка месяца

`showMonthTitleYear`    | true             | Включает отображение номера года в заголовке месяца

`showNextPrevDays`      | true             | Включает отображение дат из последующего и предыдущего месяца в календаре текущего месяца



### HTML-представление дней календаря

Для каждого дня месяца в HTML-коде календаря устанавливаются следующие HTML-атрибуты `data-*`:

- `data-day` - день месяца (1-31);

- `data-month` - номер месяца (0-11). Нумерация месяцев начинается с нуля (0 - январь, 11 - декабрь);

- `data-year` - четырёхзначный номер года;

- `data-wday` - номер дня недели (0-6). Нумерация дней недели начинается с нуля (0 - понедельник, 6 - воскресенье);

- `data-iso-date` - дата в формате [ISO 8601](https://ru.wikipedia.org/wiki/ISO_8601) (2020-06-28).

Для каждого дня месяца в HTML-коде календаря могут быть установлены CSS-классы со следущими именами,

характеризующими данный день месяца:

- `current` - день текущего месяца;

- `previous` - день предыдущего месяца;

- `next` - день следующего месяца;

- `today` - сегодняшний день;

- `holiday` - выходной день (суббота или воскресенье).

Пример:

```html



      6



```



### Примеры



#### Календарь на текущий год

```js

$(() => {

    let calendar = new Calendar();

    // Включаем отображение заголовка года

    calendar.showYearTitle = true;

    // Выключаем отображение номера года в заголовке месяца

    calendar.showMonthTitleYear = false;

    // Выключаем отображение дат из последующего и предыдущего месяца в текущем месяце

    calendar.showNextPrevDays = false;

    // Получам календарь на текущий год

    let $year = calendar.getYearHTML();

    // Выводим календарь

    $('body').append($year);

});

```



#### Календарь на заданный год

```js

$(() => {

    let calendar = new Calendar(2020);

    // Получам календарь на 2020 год

    let $year = calendar.getYearHTML();

    // Выводим календарь

    $('body').append($year);

});

```



#### Календарь на текущий месяц текущего года

```js

$(() => {

    let calendar = new Calendar();

    // Получам календарь на текущий месяц текущего года

    let $month = calendar.getMonthHTML();

    // Выводим календарь

    $('body').append($month);

});

```



#### Календарь на заданный месяц заданного года

```js

$(() => {

    let calendar = new Calendar(2020);

    // Получам календарь на июнь месяц 2020-го года

    let $month = calendar.getMonthHTML(5);

    // Выводим календарь

    $('body').append($month);

});

```



#### HTML-код страницы календаря

```html

  

    

    

    Calendar example

        

    

    

    

      $(() => {

        let calendar = new Calendar(),

            $year = calendar.getYearHTML(),

            $month = calendar.getMonthHTML();

        $('body').append($year, $month);

      });

    

  

  

  

```



#### Формируемый HTML-код календаря на месяц

```html

   


    Июнь 2020

    

      Пн

      Вт

      Ср

      Чт

      Пт

      Сб

      Вс

      

        1

      

      

        2

      

      

        3

      

      

        4

      

      

        5

      

      

        6

      

      

        7

      

      

        8

      

      

        9

      

      

        10

      

      

        11

      

      

        12

      

      

        13

      

      

        14

      

      

        15

      

      

        16

      

      

        17

      

      

        18

      

      

        19

      

      

        20

      

      

        21

      

      

        22

      

      

        23

      

      

        24

      

      

        25

      

      

        26

      

      

        27

      

      

        28

      

      

        29

      

      

        30

      

      

        1

      

      

        2

      

      

        3

      

      

        4

      

      

        5

      

    

  

```



## Автор

© 2019-2021 andrey-tech



## Лицензия

Данный класс распространяется на условиях лицензии [MIT](./LICENSE).