Skip to content

mp-calendar is a web components providing calendar date functionality and event support, build with Polymer 3.0

License

Notifications You must be signed in to change notification settings

mpachnis/mp-calendar

Repository files navigation

Published on webcomponents.org Published on Vaadin  Directory Stars on vaadin.com/directory

<mp-calendar>

mp-calendar is a web component, providing calendar date functionality and events support, build with Polymer 3.0. For quick navigation between month and year, you can select one from the list. You can get previous polymer version, 1.x or 2.x, by selecting different branch.

Demo

mp-calendar docs & demo

Install:

npm install --save @mpachnis/mp-calendar

Import in a HTML file:

<html>
    <head>
        <script type="module">
            import '@mpachnis/mp-calendar/mp-calendar.js';
        </script>
    </head>
    <body>
        <mp-calendar></mp-caledanr>
    </body>
</html>

In a Polymer 3 element:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@mpachnis/mp-calendar/mp-calendar.js';

class CustomElement extends PolymerElement {
    static get template() {
        return html`
            <mp-calendar></mp-caledanr>
        `;
    }
}
customElements.define('custom-element', CustomElement);

Properties

Property Type Description Default
day-labels Array This property can be used to localize the elements day labels. Do not change the order Default: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday
month-labels Array This property can be used to localize the elements month labels. January, February, March, April, May, June, July, August, September, October, November, December
disabled-dates Array Disable current month's weekdays. Set the disabled dates. ex. disabled-dates="[4, 10, 12, 19, 30]" None
disabled-days Object Disable week days. Set the disabled days. This will read the days from dayLabels. If you use custom day labels, same values must be applyied here. ex. For default values: disabled-days='["Monday", "Thursday"]'. For custom labes: day-labels='["Su","Mo","Tu","We","Th","Fr","Sa"]' then disabled-days='["Mo", "Th"]'. None
disabled-in-months Array Related to disabled-dates & disabled-weeks. In which months, the disabled days or weeks will be disabled. ex. disabled-in-months="[5, 6]". The disabled-dates & disabled-weeks will effective on May & June. All months
disabled-weeks Array Disable month's weeks, starting from 0 to 4 for default. If show-days-in-month=42 then total weeks are from 0 to 5 None
disable-prev-days Boolean Disable previous month days. false
disable-next-days Boolean Disable next month days. false
events-file String Set a json file that includes the events. ex. events-file="events.json" None
events-object Object Set an object containing events. ex. events-object='[{"title":"Red style category","content":"Skype call at 15:40","date":"2018-07-20","category":"red", "color": "#000"}]' None
first-day-of-week Number Set the first day of the week. Sunday is 0, Monday is 1 and so on 0
show-days-in-month Number How many day will be visible on each month, including previous and next month days. 35
min-year Number Set the min year list. 5
max-year Number Set the max year list. 5
event-day-color String Event border color for a day with more than 3 events. Color can be set as rgb(a), hex or hsl(a) #b56ce2

Themes

There are 3 additional theme to choose, dark, light-blue, light-grey. dark light blue light grey

You can also customize the calendar your self with the following properties:

Property Description
--main-bg Calendar's main background color
--header-bg Calendar's header background color
--main-header-color Calendar's header color
--header-icon-bg Calendar's icons background
--header-icon-opacity header's icon opacity on hover event
--inner-date-color Current date color inside the calendar icon
--labels-color The color of the days
--border-width Calendar's border width
--border-right-width Calendar's right border (if you set it to 0 then the dates will have top and bottom border)
--border-color Calendar's border color
--prev-days-bg Calendar's previous month dates background color
--prev-days-color Calendar's previous month dates color
--curr-days-bg Calendar's current month dates background
--curr-days-color Calendar's current month dates color
--next-days-bg Calendar's next month dates background
--next-days-color Calendar's next month dates color
--disabled-color Calendar's disabled dates color
--disabled-text-shadow Calendar's disabled dates text shadow effect
--selected-day-bg Calendar's selected day background color
--today-boxshadow-color Calendar's current date shadow style, it's adding a small border style effect
--selected-day-hover-bg Calendar's selected day background color on hover

Events

There are 4 ready to use categories: red, blue, green and orange. Each day which have an event, will also have a color line at the right side, based on the category. If a day have 4 or more events, then the display color will be taken from the property event-day-color. Date format YYYY-MM-DD. If you change the json file on events-file or an event on events-object, calendar will automatically show the changes. Example:

[
    {
        "title": "Skype",
        "content": "Skype call at 15:40",
        "date": "2017-06-02",
        "color": "#000"
    },
    {
        "title": "Meeting",
        "content": "Meeting at 14:00",
        "date": "2017-06-05",
        "category": "orange"
    },
    {
        "title": "Notification",
        "content": "Just a notification",
        "date": "2017-06-10",
        "category": "green"
    },
    {
        "title": "Appointment",
        "content": "Doctor's appointment at 20:00",
        "date": "2017-06-18",
        "category": "blue"
    }
]

Icons

Arrow icons designed by Designerz Base

License

MIT License

About

mp-calendar is a web components providing calendar date functionality and event support, build with Polymer 3.0

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •