https://github.com/michael-hack/bulma-calendar
Bulma's extension to display a calendar
https://github.com/michael-hack/bulma-calendar
Last synced: 3 months ago
JSON representation
Bulma's extension to display a calendar
- Host: GitHub
- URL: https://github.com/michael-hack/bulma-calendar
- Owner: michael-hack
- License: mit
- Created: 2017-08-09T17:48:59.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-10-11T00:01:01.000Z (almost 2 years ago)
- Last Synced: 2025-12-13T06:55:06.363Z (7 months ago)
- Language: JavaScript
- Size: 7.33 MB
- Stars: 294
- Watchers: 4
- Forks: 161
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bulma - bulma-calendar - Display a calendar with different colors and sizes (Extensions / Courses)
README
# bulma-calendar
Bulma's extension to display a calendar. It can be used on page as large calendar with apointments or in modal/popup for datepicker.
[](https://www.npmjs.com/package/bulma-calendar-js)
[](https://www.npmjs.com/package/bulma-calendar-js)
[](https://travis-ci.org/Wikiki/bulma-calendar)
# Examples
### Date format
```js
var calendars = new bulmaCalendar('.bulmaCalendar', {
dateFormat: 'dd.MM.yyyy' // 01.01.2021
});
```
where `dateFormat` is a string with a combination of this values:
```
d: short day (1-31)
dd: long day (00-31)
EEE: short weekday (es: Mon)
EEEE: long weekday (es: Monday)
M: short month (1-12)
MM: long month (01-12)
MMM: short month name (es: Jan, Feb)
MMMM: full month name (es: January)
yy: short year (18)
yyyy: full year (2018)
```
For more values take a look at the [date-fns 2.x format](https://date-fns.org/v2.21.3/docs/format).
### Language
```js
var calendars = new bulmaCalendar('.bulmaCalendar', {
lang: 'it' // refer to date-fns locales
});
```
### Default Options
Here's the options object and the default values as appears on code. For more options, please see the documentation.
```js
var defaultOptions = {
color: 'primary',
isRange: false,
allowSameDayRange: true,
lang: 'en-US',
startDate: undefined,
endDate: undefined,
minDate: null,
maxDate: null,
disabledDates: [],
disabledWeekDays: undefined,
highlightedDates: [],
weekStart: 0,
dateFormat: 'MM/dd/yyyy',
enableMonthSwitch: true,
enableYearSwitch: true,
displayYearsCount: 50,
};
```
# Documentation & Demo
You can find the full Documentation and a demo [here](https://doc.mh-s.de/bulma-calendar)