Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

michael-hack/bulma-calendar

Repository files navigation

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.

npm npm Build Status

Examples

Date format

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.

Language

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.

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

About

Bulma's extension to display a calendar

Resources

License

Stars

Watchers

Forks

Packages

Contributors

AltStyle によって変換されたページ (->オリジナル) /