Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
@event-calendar/common
Advanced tools
See demo.
Full-sized drag & drop JavaScript event calendar with resource view:
Inspired by FullCalendar, implements similar options.
The first step is to install the Event Calendar core
package:
npm install --save-dev @event-calendar/core
Then install any additional plugins you plan to use:
npm install --save-dev @event-calendar/time-grid
You must use at least one plugin that provides a view. The following plugins are currently available:
@event-calendar/day-grid
@event-calendar/list
@event-calendar/resource-time-grid
@event-calendar/time-grid
@event-calendar/interaction
(doesn't provide a view)Then, in your Svelte component, use the calendar something like this:
<script>
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
let plugins = [TimeGrid];
let options = {
view: 'timeGridWeek',
events: [
// your list of events
]
};
</script>
<Calendar {plugins} {options} />
Or in ES6 module:
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
let ec = new Calendar({
target: document.getElementById('ec'),
props: {
plugins: [TimeGrid],
options: {
view: 'timeGridWeek',
events: [
// your list of events
]
}
}
});
Include the following lines of code in the <head>
section of your page:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build/event-calendar.min.css">
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build/event-calendar.min.js"></script>
If you don't need IE11 support, you can use the
modern
version of the bundle instead:event-calendar-modern.min.css
andevent-calendar-modern.min.js
. The lack of IE11 support makes the bundle ~1.5 times smaller.
Then initialize the calendar with something like this:
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
events: [
// your list of events
]
});
You can modify the calendar options after initialization using the setOption method.
ec.setOption('slotDuration', '01:00');
In Svelte, you can simply update the original options
object.
<script>
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
let plugins = [TimeGrid];
let options = {
view: 'timeGridWeek'
};
function updateOptions() {
options.slotDuration = '01:00';
}
</script>
<button on:click={updateOptions}>Change slot duration</button>
<Calendar {plugins} {options} />
object
{today: 'today', dayGridMonth: 'month', listDay: 'list', listWeek: 'list', listMonth: 'list', listYear: 'list', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', timeGridDay: 'day', timeGridWeek: 'week'}
Text that is displayed in buttons of the header toolbar.
Date
or string
new Date()
Date that is currently displayed on the calendar.
This value can be either a JavaScript Date object, or an ISO8601 date string like '2022-12-31'
.
function
undefined
Callback function that is triggered when the user clicks on a date or a time.
function (dateClickInfo) {}
dateClickInfo
is an object with the following properties:
| JavaScript Date object for the clicked date and time |
| ISO8601 string representation of the date |
| HTML element that represents the whole-day that was clicked on |
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
|
If the current view is a resource view, the Resource object that owns this date |
boolean
false
Determines whether the resource view should render the date headings above the resource headings.
function
undefined
Callback function that is triggered when the date range of the calendar was originally set or changed by clicking the previous/next buttons, changing the view, manipulating the current date via the API, etc.
function (info) {}
info
is an object with the following properties:
| JavaScript Date object for the beginning of the range the calendar needs events for |
| JavaScript Date object for the end of the range the calendar needs events for. Note: This value is exclusive |
| ISO8601 string representation of the start date |
| ISO8601 string representation of the end date |
|
The current View object |
object
or function
{weekday: 'short', month: 'numeric', day: 'numeric'}
Views override the default value as follows:
- dayGridMonth
{weekday: 'short'}
- timeGridDay
{weekday: 'long'}
Defines the text that is displayed on the calendar’s column headings.
This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns formatted string:
function (date) {
// return formatted date string
}
| JavaScript Date object that needs to be formatted |
boolean
false
Determines the maximum number of stacked event levels for a given day in the dayGrid
view.
If there are too many events, a link like +2 more
is displayed.
Currently, only the value true
is supported, which limits the number of events to the height of the day cell.
object
or function
{month: 'long', day: 'numeric', year: 'numeric'}
Defines the date format of title of the popover created by the dayMaxEvents option.
This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns formatted string:
boolean
true
Views override the default value as follows:
- dayGridMonth
false
Determines whether to display an event’s end time.
boolean
true
Determines whether the calendar should automatically scroll during the event drag-and-drop when the mouse crosses the edge.
string
, integer
or object
{weeks: 1}
Views override the default value as follows:
- dayGridMonth
{months: 1}
- listDay
{days: 1}
- listWeek
{weeks: 1}
- listMonth
{months: 1}
- listYear
{years: 1}
- resourceTimeGridDay
{days: 1}
- resourceTimeGridWeek
{weeks: 1}
- timeGridDay
{days: 1}
- timeGridWeek
{weeks: 1}
Sets the duration of a view.
This should be a value that can be parsed into a Duration object.
boolean
false
Determines whether the events on the calendar can be dragged and resized (both at the same time).
If you don't need both, use the more specific eventStartEditable and eventDurationEditable instead.
Array
[]
Array of plain objects that will be parsed into Event objects and displayed on the calendar.
This option is not used if the eventSources
option is provided.
string
undefined
Sets the default background color for events on the calendar.
You can use any of the CSS color formats such '#f00'
, '#ff0000'
, 'rgb(255,0,0)'
, or 'red'
.
function
undefined
Callback function that is triggered when the user clicks an event.
function (eventClickInfo) { }
eventClickInfo
is an object with the following properties:
| The HTML element for the event |
|
The associated Event object |
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
string
undefined
This is currently an alias for the eventBackgroundColor
.
string
, object
or function
undefined
Defines the content that is rendered inside an event’s element.
This value can be either a string containing HTML '<p>...</p>'
, an object containing the HTML string {html: '<p>...</p>'}
, an object containing an array of DOM nodes {domNodes: [node1, node2, ...]}
or a function that returns any of the above formats:
function (eventInfo) {
// return string or object
}
eventInfo
is an object with the following properties:
|
The associated Event object |
| Formatted time of the event |
|
The current View object |
function
undefined
Callback function that is triggered right after the element has been added to the DOM. If the event data changes, this is not called again.
function (mountInfo) { }
mountInfo
is an object with the following properties:
| The HTML element for the event |
|
The associated Event object |
| Formatted time of the event |
|
The current View object |
integer
5
Defines how many pixels the user’s mouse must move before the event dragging begins.
function
undefined
Callback function that is triggered when the event dragging begins.
function (info) { }
info
is an object with the following properties:
|
The associated Event object |
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
function
undefined
Callback function that is triggered when the event dragging stops.
It is triggered before the event’s information has been modified (if moved to a new date/time) and before the eventDrop callback is triggered.
function (info) { }
info
is an object with the following properties:
|
The associated Event object |
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
function
undefined
Callback function that is triggered when dragging stops, and the event has moved to a different day/time.
It is triggered after the event’s information has been modified and after the eventDragStop callback has been triggered.
function (info) { }
info
is an object with the following properties:
|
The associated Event object |
|
An Event object that holds information about the event before the drop |
|
If the resource has changed, this is the Resource object the event came from. If the resource has not changed, this will be undefined |
|
If the resource has changed, this is the Resource object the event went to. If the resource has not changed, this will be undefined |
|
A Duration object that represents the amount of time the event was moved by |
|
A function that, if called, reverts the event’s start/end date to the values before the drag |
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
boolean
true
Determines whether calendar events can be resized.
function
undefined
Callback function that is triggered when the user hovers over an event with the cursor (mouse pointer).
function (mouseEnterInfo) { }
mouseEnterInfo
is an object with the following properties:
| The HTML element for the event |
|
The associated Event object |
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
function
undefined
Callback function that is triggered when the cursor (mouse pointer) is moved out of an event.
function (mouseLeaveInfo) { }
mouseLeaveInfo
is an object with the following properties:
| The HTML element for the event |
|
The associated Event object |
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
function
undefined
Callback function that is triggered when resizing stops, and the duration of the event has changed.
It is triggered after the event’s information has been modified and after the eventResizeStop callback has been triggered.
function (info) { }
info
is an object with the following properties:
|
The associated Event object |
|
An Event object that holds information about the event before the resize |
|
A Duration object that represents the amount of time the event’s end date was moved by |
|
A function that, if called, reverts the event’s end date to the values before the resize |
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
function
undefined
Callback function that is triggered when the event resizing begins.
function (info) { }
info
is an object with the following properties:
|
The associated Event object |
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
function
undefined
Callback function that is triggered when the event resizing stops.
It is triggered before the event’s information has been modified (if duration is changed) and before the eventResize callback is triggered.
function (info) { }
info
is an object with the following properties:
|
The associated Event object |
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
EventSource[]
[]
Array of EventSource objects that will provide the Event Calendar with data about events.
This option is used instead of the events
option.
EventSource
should be an object with one of the following sets of properties:
|
A URL that the calendar will fetch Event objects from |
|
HTTP request method. Default |
|
Other GET/POST data you want to send to the server. Can be a plain object or a function that returns an object. Default |
|
A custom function that is executed whenever the Event Calendar needs new event data.
The If there is any failure (e.g., if an AJAX request fails), then call the Instead of calling |
boolean
true
Determines whether the events on the calendar can be dragged.
object
or function
{hour: 'numeric', minute: '2-digit'}
Defines the time-text that is displayed on each event.
This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns formatted string:
function (time) {
// return formatted time string
}
| JavaScript Date object that needs to be formatted |
boolean
false
Determines whether resources with no events for the current range should be hidden in the resource view.
integer
0
The day that each week begins at, where Sunday is 0
, Monday is 1
, etc. Saturday is 6
.
boolean
false
Determines whether slotMinTime and slotMaxTime should automatically expand when an event goes out of bounds.
object
{start: 'title', center: '', end: 'today prev,next'}
Defines the buttons and title at the top of the calendar.
An object can be supplied with properties start
,center
,end
. These properties contain strings with comma/space separated values. Values separated by a comma will be displayed adjacently. Values separated by a space will be displayed with a small gap in between. Strings can contain any of the following values:
| A text containing the current month/week/day |
| A button for moving the calendar back one month/week/day |
| A button for moving the calendar forward one month/week/day |
| A button for moving the calendar to the current month/week/day |
a view name like | A button that will switch the calendar to a specific view |
string
'auto'
Defines the height of the entire calendar.
This should be a valid CSS value like '100%'
or '600px'
.
Array
[]
Exclude certain days-of-the-week from being displayed, where Sunday is 0
, Monday is 1
, etc. Saturday is 6
.
Array
[]
Array of dates that need to be highlighted in the calendar.
Each date can be either an ISO8601 date string like '2022-12-31'
, or a JavaScript Date object.
boolean
true
Determines when event fetching should occur.
When set to true
(the default), the calendar will only fetch events when it absolutely needs to, minimizing HTTP requests. For example, say your calendar starts out in month view, in February. The Event Calendar will fetch events for the entire month of February and store them in its internal storage. Then, say the user switches to week view and begins browsing the weeks in February. The calendar will avoid fetching events because it already has this information stored.
When set to false
, the calendar will fetch events any time the view is switched, or any time the current date changes (for example, as a result of the user clicking prev/next).
object
or function
{weekday: 'long'}
Defines the text on the left side of the day headings in list view.
This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns formatted string:
function (date) {
// return formatted date string
}
| JavaScript Date object that needs to be formatted |
object
or function
{year: 'numeric', month: 'long', day: 'numeric'}
Defines the text on the right side of the day headings in list view.
This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns formatted string:
function (date) {
// return formatted date string
}
| JavaScript Date object that needs to be formatted |
function
undefined
Callback function that is triggered when event fetching starts/stops.
function (isLoading) { }
|
|
string
undefined
Defines the locales
parameter for the native JavaScript Intl.DateTimeFormat object that the Event Calendar uses to format date and time strings in options such as dayHeaderFormat, eventTimeFormat, etc.
boolean
false
Views override the default value as follows:
- dayGridMonth
true
Tells the calendar that visible dates should start from the firstDay of the week, even if it will display days outside the current range (this is a common case for a month calendar when you can see days from adjacent months).
string
, object
or function
undefined
Defines the text that is displayed instead of the default +2 more
created by the dayMaxEvents option.
This value can be either a string containing HTML '<p>...</p>'
, an object containing the HTML string {html: '<p>...</p>'}
, an object containing an array of DOM nodes {domNodes: [node1, node2, ...]}
or a function that returns any of the above formats:
function (arg) {
// return string or object
}
arg
is an object with the following properties:
| The number of hidden events |
|
The default text like |
function
undefined
Callback function that is triggered when the user clicks No events area in list view.
function (clickInfo) { }
clickInfo
is an object with the following properties:
| JavaScript native event object with low-level information such as click coordinates |
|
The current View object |
string
, object
or function
'No events'
Defines the text that is displayed in list view when there are no events to display.
This value can be either a string containing HTML '<p>...</p>'
, an object containing the HTML string {html: '<p>...</p>'}
, an object containing an array of DOM nodes {domNodes: [node1, node2, ...]}
or a function that returns any of the above formats:
function () {
// return string or object
}
boolean
false
Enables a marker indicating the current time in timeGrid
/resourceTimeGrid
views.
boolean
false
Enables mouse cursor pointer in timeGrid
/resourceTimeGrid
views.
Array
[]
Array of plain objects that will be parsed into Resource objects for displaying in the resource view.
string
, integer
or object
'06:00:00'
Determines how far forward the scroll pane is initially scrolled.
This should be a value that can be parsed into a Duration object.
string
, integer
or object
'00:30:00'
Defines the frequency for displaying time slots.
This should be a value that can be parsed into a Duration object.
integer
24
Defines the time slot height in pixels. When changing the setting, you must additionally override the following CSS styles:
.ec-time, .ec-line {
height: 24px; /* override this value */
}
object
or function
{hour: 'numeric', minute: '2-digit'}
Defines the text that will be displayed within a time slot.
This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns formatted string:
function (time) {
// return formatted time string
}
| JavaScript Date object that needs to be formatted |
string
, integer
or object
'24:00:00'
Defines the last time slot that will be displayed for each day.
This should be a value that can be parsed into a Duration object.
string
, integer
or object
'00:00:00'
Defines the first time slot that will be displayed for each day.
This should be a value that can be parsed into a Duration object.
object
or function
{active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayHead: 'ec-day-head', days: 'ec-days', event: 'ec-event', eventBody: 'ec-event-body', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', hiddenTimes: 'ec-hidden-times', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', sidebar: 'ec-sidebar', today: 'ec-today', time: 'ec-time', title: 'ec-title', toolbar: 'ec-toolbar', week: 'ec-week', withScroll: 'ec-with-scroll', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', month: 'ec-month', popup: 'ec-popup', daySide: 'ec-day-side', eventTag: 'ec-event-tag', list: 'ec-list', noEvents: 'ec-no-events', resource: 'ec-resource', resourceTitle: 'ec-resource-title', draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer', resizer: 'ec-resizer', dragging: 'ec-dragging', resizingY: 'ec-resizing-y', resizingX: 'ec-resizing-x'}
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
This value can be either a plain object with all necessary properties, or a callback function that receives default theme object and should return an actual one:
function (theme) {
// return actual theme object
}
| An object with default CSS classes |
object
or function
{year: 'numeric', month: 'short', day: 'numeric'}
Views override the default value as follows:
- dayGridMonth
{year: 'numeric', month: 'long'}
- timeGridDay
{year: 'numeric', month: 'long', day: 'numeric'}
Defines the text that is displayed in the header toolbar’s title.
This value can be either an object with options for the native JavaScript Intl.DateTimeFormat object, or a callback function that returns formatted string:
function (date) {
// return formatted date string
}
| JavaScript Date object that needs to be formatted |
string
'resourceTimeGridWeek'
The view that is displayed in the calendar. Can be 'dayGridMonth'
, 'listDay'
, 'listWeek'
, 'listMonth'
, 'listYear'
, 'resourceTimeGridDay'
, 'resourceTimeGridWeek'
, 'timeGridDay'
or 'timeGridWeek'
.
function
undefined
Callback function that is triggered right after the view has been added to the DOM.
function (mountInfo) { }
mountInfo
is an object with the following properties:
|
The mounted View object |
object
{}
You can specify options that apply only to specific views. To do so provide separate options objects within the views
option, keyed by the name of the view.
Methods allow you to manipulate the Event Calendar after initialization. They are accessible from the calendar instance.
In Svelte, methods are available from a component instance:
<script>
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
let ec;
let plugins = [TimeGrid];
let options = {
view: 'timeGridWeek',
eventSources: [{events: function() {
console.log('fetching...');
return [];
}}]
};
function invokeMethod() {
ec.refetchEvents();
}
</script>
<button on:click={invokeMethod}>Refetch events</button>
<Calendar bind:this={ec} {plugins} {options} />
name
string
The option namemixed
or undefined
This method allows you to get the current value of any calendar option.
// E.g. Get current date
let date = ec.getOption('date');
name
string
The option namevalue
mixed
The new option valueEventCalendar
The calendar instance for chainingThis method allows you to set new value to any calendar option.
// E.g. Change the current date
ec.setOption('date', new Date());
Event[]
Array of Event objectsReturns an array of events that the calendar has in memory.
id
string|integer
The ID of the eventnull
Returns a single event with the matching id
.
id
string|integer
The ID of the eventEventCalendar
The calendar instance for chainingRemoves a single event with the matching id
.
event
object
A plain object that will be parsed into an Event objectnull
Adds a new event to the calendar.
event
object
A plain object or Event objectEventCalendar
The calendar instance for chainingUpdates a single event with the matching event
.id
.
EventCalendar
The calendar instance for chainingRefetches events from all sources.
View
Returns the View object for the current view.
This is a JavaScript object that the Event Calendar uses to store information about a calendar event.
Here are all properties that exist in Event object:
| A unique string identifier of the event |
| An array of resource IDs that the event is associated with |
| JavaScript Date object holding the event’s start time |
| JavaScript Date object holding the event’s end time |
| The text appearing on the event |
|
Boolean ( |
|
Boolean ( |
|
Boolean ( |
|
The rendering type of the event. Can be In addition, in your callback functions, you may get the |
|
The eventBackgroundColor override for this specific event |
|
A plain object holding miscellaneous properties specified during parsing in the explicitly given |
When Event Calendar receives an array of plain event’s objects either from the events
option or as a result of an HTTP request to a URL of an event source, it parses the input objects into proper Event objects.
Here are all admissible fields for the event’s input object:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
This is a JavaScript object that the Event Calendar uses to store information about a period of time, like 30 minutes or 1 day and 6 hours.
Here are all properties that exist in Duration object:
| The number of years in duration |
| The number of months in duration |
| The number of days in duration |
| The number of seconds in duration. If you want hours and minutes, you need to do division on this property |
| Determines whether the duration represents a time period in weeks. This value is set during parsing the input data |
When Event Calendar receives a value for options like duration
, scrollTime
, slotDuration
and others, it parses it into a proper Duration object.
The admissible input value can be specified in one of three formats:
year
, years
, month
, months
, day
, days
, minute
, minutes
, second
, seconds
hh:mm:ss
or hh:mm
. For example, '05:00'
specifies 5 hoursThis is a JavaScript object that the Event Calendar uses to store information about a resource. Calendar events can be associated with resources and displayed separately using the resource view.
Here are all properties that exist in Resource object:
| The unique string identifier for the resource |
| The title of the resource |
When Event Calendar receives an array of plain resource’s objects for the resources
option, it parses the input objects into proper Resource objects.
Here are all admissible fields for the resource’s input object:
|
|
|
|
A View object contains information about a calendar view, such as title and date range.
Here are all properties that exist in View object:
| Name of the view |
| Title text that is displayed at the top of the header toolbar |
| JavaScript Date that is the start of the interval the view is trying to represent. For example, in month view, this will be the first day of the month. This value disregards hidden days |
| JavaScript Date that is the end of the interval the view is trying to represent. Note: This value is exclusive. For example, in month view, this will be the day after the last day of the month. This value disregards hidden days |
| JavaScript Date that is the first visible day. In month view, this value is often before the 1st day of the month, because most months do not begin on the first day-of-week |
| JavaScript Date that is the last visible day. Note: This value is exclusive |
FAQs
Full-sized drag & drop event calendar with resource view
The npm package @event-calendar/common receives a total of 302 weekly downloads. As such, @event-calendar/common popularity was classified as not popular.
We found that @event-calendar/common demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.