beneroch-calendar

2.0.5 • Public • Published

Calendar

Description

You can find demo here

Home made calendar that covers events and datepicking. Every event on a day in the calendar returns a date object of the current target. Note that even the header triggers these events, with a null object as a date.

For date picking, you can add a onDayClick event and then manage the date object. ( @see onDayClick option below ) Events are passed as a JSON object and each requires a title and a date. The date parameter is mixed, which means it can be a string, a timestamp or an object. It'll be an object if the event has a beginning and an end.

Simple date

[ {
   "date" : "2024/1/10",
   "content" : "",
   "title" : ""
} ]

Complex date

[ {
   "date" : {
       "start" : "2024/1/10",
       "end" : "2024/1/11"
   },
   "content" : "",
   "title" : ""
} ]

Multiple date formats

[ {
   "date" : {
       "start" : "2024/1/10",
       "end" : "january 11 2024"
   },
   "content" : "",
   "title" : ""
},{
   "date" : "september 24 2024",
   "content" : "",
   "title" : ""
} ]

Easy to use

The calendar is easy to use and only requires minimal options. Everything is yet customizable. The calendar builds himself on a DOM object (DIV) and fits the boundaries of that object. Let's see some examples

Given the following div:

<div id="calendar-widget"></div>

Build a calendar without jQuery

let opts = {};
let domElement = document.getElementById('calendar-widget');
let calendar = new bCalendar(domElement, opts); // Same has $('#calendar-widget').calendar(opts)

Build a french calendar (see default options)

$('#calendar-widget').calendar()

Build an english calendar

$('#calendar-widget').calendar({
    lang : 'en'
})

Add unsupported language

$('#calendar-widget').calendar({
    lang : 'customLang',
    translations: {
        months: {
            customLang : ['January', 'February', 'March', 'April','May', 'June', 'July', 'August', 'September','October', 'November', 'December']
        },
        days: {
            customLang : ['S', 'M', 'T', 'W', 'T', 'F', 'S']
        },
        nextMonthLabel : {
            customLang : 'Next Month'
        },
        prevMonthLabel : {
            customLang : 'Previous Month'
        }
        nextYearLabel : {
            customLang : 'Next Year'
        },
        prevYearLabel : {
            customLang : 'Previous Year'
        }
    }
})

Start in month view display

$('#calendar-widget').calendar({
    mode: 'month'
})

Add events

$('#calendar-widget').calendar({
    events : [
        {
            date:"2024/01/16",
            title: 'Test title',
            content : 'Well, turns out on that date we uploaded the plugin'
        },
        {
        date:{
            start: "2024/01/16",
            end: "february 1 2024"
        },
            title: 'Doc title',
            content : 'We also u"<>pdated the doc accordingly'
        },
        {
            date:{
                start : "2024/01/17",
                end : "2024/01/27"
            },
            title: 'Changes',
            content : 'We might add s\0ome changes during theses days'
        }
    ]
});

API (jQuery)

Name Description
destroy Destroys the calendar by removing all HTML and LISTENERS
next Goes to next month
prev Goes to previous month
addEvent Adds one events to the currently existing events
addEvents Adds multiple events to the currently existing events
setEvents Sets the calendar events destroying all previously added events

Options

Name Type Description
startDate Date Object Current display date ( Default: today )
showStartDate Boolean Show indicator of the startDate ( Default: true )
lang string Current display language
mode string Current display mode. Either month or date ( Default: date )
useControls boolean Auto output the controls for next and prev month if set to true (default: true)
allowYearView boolean Define if you can see the year view (default: false, unless mode is set to 'year')
allowMonthView boolean Define if you can see the month view (default: false, unless mode is set to 'month')
events object JSON of all the events - Events can have pretty much any data, but requires at least a title and a date
displayEventsNumber boolean Define if you can to display the number of events on the calendar (default: true)
displayAdjacentMonthDates boolean Define if you want to display the adjacent month dates or empty boxes (default: true)
eventsNumberTemplate string Templates used to display the number of events on a day / year / month

translations

Name Type Description
months object Labels for months, by lang, in an array starting from JANUARY to DECEMBER
days object Labels for days, by lang, in an array starting from SUNDAY to SATURDAY
nextMonthLabel object Labels for skip month's title, by lang, in an array (view default)
prevMonthLabel object Labels for skip month's title, by lang, in an array (view default)
nextYearLabel object Labels for skip year's title, by lang, in an array (view default)
prevYearLabel object Labels for skip year's title, by lang, in an array (view default)

classes

Name Type Description
mainCalendarClass string The main calendar class, set on the DIV object that wraps it all
calendarTitleClass string The calendar title class, set on the H1 object
calendarControlsClass string The calendar controls wrapper class, set on the DIV object that wraps controls
calendarControlsPrevClass string The calendar previous month button class, set on the ANCHOR object
calendarControlsNextClass string The calendar next month button class, set on the ANCHOR object
calendarTableClass string The calendar table class, set on the TABLE object
calendarTableHeaderClass string The calendar table header class, set on the TR object that contains the day's labels
calendarRowClass string The calendar row class, set on all the other TR object as opposed to 'calendarTableHeaderClass'
calendarDayClass string The calendar day class, set on all TD inside the calendar (ALSO in the header)
calendarMonthClass string The calendar month class, set on all TD inside the calendar (ALSO in the header)
calendarLinkClass string The calendar link class, set on the ANCHOR object inside a day
calendarTextClass string The calendar text class, set on the object inside the object of a day (calendarLinkClass)
calendarEventClass string The calendar event class, set on the TD wrapping the day with an event
calendarEmptyDayClass string The calendar empty day class, set on the TD wrapping a day with no date
calendarCurrentDayClass string The calendar current day class, set on the td wrapping today's date
calendarSelectedDayClass string The calendar selected day class, set on the td wrapping the selected date
calendarSelectedMonthClass string The calendar empty day class, set on the TD wrapping a day with no date

callbacks

Name Type Description
onDayMouseOver function Triggered when moving mouse over a day
onEventMouseOver function Triggered when moving mouse over a day with an event
onDayMouseOut function Triggered when moving mouse out of a day
onEventMouseOut function Triggered when moving mouse out of a day with an event
onDayClick function Triggered when clicking on a day
onEventClick function Triggered when clicking on a day with an event
onPrev function Triggered when clicking on the previous button while in date mode / Added to the regular event @see changeMonth
onPrevYear function Triggered when clicking on the previous button while in month mode
onNext function Triggered when clicking on the next button while in date mode / Added to the regular event @see changeMonth
onNextYear function Triggered when clicking on the next button while in month mode
onGotoMonthView function Triggered after switching to the month view
onGotoDateView function Triggered after switching to the date view

Package Sidebar

Install

npm i beneroch-calendar

Weekly Downloads

4

Version

2.0.5

License

MIT

Unpacked Size

312 kB

Total Files

24

Last publish

Collaborators

  • beneroch