@mpachnis/mp-calendar NPM

<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.

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

mpachnis calendar events polymer web-components web-component

@polymer/polymer

@everything-registry/sub-chunk-621 bluetech @gfsdeliver/gfs-checkout-widget @infinitebrahmanuniverse/nolb-_mp

4 years ago

5 years ago

5 years ago

5 years ago