ionic7-calendar
Advanced tools
Ionic calendar directive
Version 1.0
https://stackblitz.com/edit/ionic-calendar-demo-1-0?file=src%2Fapp%2Fexample.component.html
Version 0.x
https://stackblitz.com/edit/ionic-calendar-demo?file=pages%2Fhome%2Fhome.html
Version 2.2.x depends on Ionic (>=7.0.0), Angular (>=17.0.0) and Swiper (>=10.1.0).
Version 2.1.x depends on Ionic (>=7.0.0), Angular (>=16.0.0) and Swiper (>=10.1.0).
Version 2.0.x depends on Ionic (>=7.0.0), Angular (>=16.0.0) and Swiper (>=8.4.6, <9.0.0).
Version 1.0.x depends on Ionic (>=6.1.9), Angular (>=15.1.2) and Swiper (>=8.4.6, <9.0.0).
Version 0.6.x depends on Ionic (>=5.1.0) and Angular (>=9.1.0).
version 0.5.x depends on Ionic (>=4.0.0-rc.1), also supports Ionic 5.0.0.
version 0.4.x depends on Ionic (>=3.9.2).
version 0.3.x depends on Ionic (>=3.1.1).
version 0.2.9+ depends on Ionic (>=2.3.0).
version 0.2.x depends on Ionic 2.0.0-rc.5 (rc.5 has breaking change on the slide API) and 2.0.0 final version onwards.
version 0.1.x depends on Ionic 2.0.0-rc.1 ~ Ionic 2.0.0-rc.4
version 0.2-0.4 has below dependency:
intl 1.2.5, due to issue https://github.com/angular/angular/issues/3333
npm install ionic2-calendar --save
version 1.0.x is also published as Ionic6-Calendar package name. So could also run
npm install ionic6-calendar --save
version 2.0.x is also published as Ionic7-Calendar package name. So could also run
npm install ionic7-calendar --save
NOTE: Starting from Version 1.0.x, the underlying implementaion is based on Swiper instead of IonSlides, so also needs to install Swiper dependency.
Install swiper dependency
npm install swiper --save
Import swiper css in global.scss
@import 'swiper/css';
If using version 1.0.x, could use both ionic2-calendar or ionic6-calendar, ionic7-calendar.
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '@ionic/angular';
import { MyApp } from './app/app.component';
import { NgCalendarModule } from 'ionic2-calendar';
@NgModule({
declarations: [
MyApp
],
imports: [
NgCalendarModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
]
})
export class AppModule {}
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app/app.component';
import { NgCalendarModule } from 'ionic2-calendar';
@NgModule({
declarations: [
MyApp
],
imports: [
NgCalendarModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
]
})
export class AppModule {}
If you are using PageModule, you need to import the NgCalendarModule in your page module
import { NgCalendarModule } from 'ionic2-calendar';
@NgModule({
declarations: [
MyPage
],
imports: [
IonicPageModule.forChild(MyPage),
NgCalendarModule
],
entryComponents: [
MyPage
]
})
export class MyPageModule {}
<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onRangeChanged)="reloadSource(startTime, endTime)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
[step]="calendar.step">
</calendar>
<calendar ... [calendarMode]="calendar.mode"></calendar>
Version 1.0.x onwards
import { CalendarMode } from 'ionic2-calendar';
calendar = {
mode: 'week' as CalendarMode
};
Version 0.x
import { CalendarMode } from 'ionic2-calendar/calendar';
calendar = {
mode: 'week' as CalendarMode
};
<calendar ... [step]="calendar.step"></calendar>
import { Step } from 'ionic2-calendar/calendar';
calendar = {
step: 30 as Step
};
<calendar ... [timeInterval]="30"></calendar>
<calendar ... [locale]="calendar.locale"></calendar>
calendar = {
locale: 'en-GB'
};
<calendar ... [markDisabled]="markDisabled"></calendar>
markDisabled = (date: Date) => {
var current = new Date();
return date < current;
};
<calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>
calendar = {
dateFormatter: {
formatMonthViewDay: function(date:Date) {
return date.getDate().toString();
},
formatMonthViewDayHeader: function(date:Date) {
return 'testMDH';
},
formatMonthViewTitle: function(date:Date) {
return 'testMT';
},
formatWeekViewDayHeader: function(date:Date) {
return 'testWDH';
},
formatWeekViewTitle: function(date:Date) {
return 'testWT';
},
formatWeekViewHourColumn: function(date:Date) {
return 'testWH';
},
formatDayViewHourColumn: function(date:Date) {
return 'testDH';
},
formatDayViewTitle: function(date:Date) {
return 'testDT';
}
}
};
dir
If set to "rtl", the calendar supports RTL language. This feature is only supported in Ionic 2.3.0 version onwards.
Default value: ""
scrollToHour
Make weekview and dayview scroll to the specific hour after entering to the new view.
Default value: 0
preserveScrollPosition
If set to true, the previous/next views in weekview and dayview will also scroll to the same position as the current active view.
Default value: false
lockSwipeToPrev
If set to true, swiping to previous view is disabled.
Default value: false
<calendar ... [lockSwipeToPrev]="lockSwipeToPrev"></calendar>
onCurrentDateChanged(event:Date) {
var today = new Date();
today.setHours(0, 0, 0, 0);
event.setHours(0, 0, 0, 0);
if (this.calendar.mode === 'month') {
if (event.getFullYear() < today.getFullYear() || (event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
this.lockSwipeToPrev = true;
} else {
this.lockSwipeToPrev = false;
}
}
}
<calendar ... [lockSwipeToNext]="lockSwipeToNext"></calendar>
onCurrentDateChanged(event:Date) {
var today = new Date();
today.setHours(0, 0, 0, 0);
event.setHours(0, 0, 0, 0);
if (this.calendar.mode === 'month') {
if (event.getFullYear() > today.getFullYear() || (event.getFullYear() === today.getFullYear() && event.getMonth() >= today.getMonth())) {
this.lockSwipeToNext = true;
} else {
this.lockSwipeToNext = false;
}
}
}
Version 1.x
Note: Since swiping is disabled, you could set currentDate or call slideToPrev/slideToNext method to move the calendar to previous/next view. You need to first set the lockSwipes to false, move the slide, then set it back.
<calendar ... [lockSwipes]="lockSwipes"></calendar>
moveSlide() {
this.calendar.lockSwipes = false;
setTimeout(function() {
this.myCalendar.slideNext();
this.calendar.lockSwipes = true;
},100);
}
Version 0.x
Note: Since swiping is disabled, you could set currentDate or call slideToPrev/slideToNext method to move the calendar to previous/next view. Do not set lockSwipeToPrev in the constructor phase. It will cause the view not updating when changing the currentDate. You could either set it in some callback function after initialization phase or use setTimeout to trigger some delay.
<calendar ... [lockSwipes]="lockSwipes"></calendar>
ngAfterViewInit() {
var me = this;
setTimeout(function() {
me.lockSwipes = true;
},100);
}
<calendar ... startHour="9"></calendar>
<calendar ... endHour="19"></calendar>
<calendar ... sliderOptions="sliderOptions"></calendar>
options = {
spaceBetween: 10,
threshold: 50
};
<calendar ... (onCurrentDateChanged)="onCurrentDateChanged($event)"></calendar>
onCurrentChanged = (ev: Date) => {
console.log('Currently viewed date: ' + ev);
};
<calendar ... (onRangeChanged)="onRangeChanged($event)"></calendar>
onRangeChanged = (ev: { startTime: Date, endTime: Date }) => {
Events.query(ev, (events) => {
this.eventSource = events;
});
};
<calendar ... (onEventSelected)="onEventSelected($event)"></calendar>
onEventSelected = (event) => {
console.log(event.title);
};
<calendar ... (onTimeSelected)="onTimeSelected($event)"></calendar>
onTimeSelected = (ev: { selectedTime: Date, events: any[], disabled: boolean }) => {
console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
};
<calendar ... (onDayHeaderSelected)="onDayHeaderSelected($event)"></calendar>
onDayHeaderSelected = (ev: { selectedTime: Date, events: any[], disabled: boolean }) => {
console.log('Selected day: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
};
<calendar ... (onTitleChanged)="onViewTitleChanged($event)"></calendar>
onViewTitleChanged = (title: string) => {
this.viewTitle = title;
};
There are two ways to customize the look and feel. If you just want to simply change the color or size of certain element, you could override the styles of the predefined css classes. CSS Customization section lists some important css classes. If you need to change the layout of certain element, you could refer to the Template Customization part.
The customized styles should be added in global.scss. Just adding in each components css file may not work due to the View Encapsulation.
monthview-primary-with-event
The date that is in current month and having events
monthview-secondary-with-event
The date that is in previous/next month and having events
monthview-selected
The selected date
monthview-current
The current date
monthview-disabled
The disabled date
weekview-with-event
The date having all day events, applied to the day header in week view
weekview-current
The current date, applied to the day header in week view
weekview-selected
The selected date, applied to the day header in week view
weekview-allday-label
Applied to the all day label in week view
dayview-allday-label
Applied to the all day label in day view
calendar-hour-column
Applied to the hour column in both weekview and day view
Note: For any css class appear in the customized template, you need to specify the styles by yourself. The styles defined in the calendar component won’t be applied because of the view encapsulation. You could refer to calendar.ts to get the definition of context types.
<ng-template #monthviewDisplayEventTemplate let-view="view" let-row="row" let-col="col">
{{view.dates[row*7+col].label}}
</ng-template>
<calendar ... [monthviewDisplayEventTemplate]="monthviewDisplayEventTemplate"></calendar>
<ng-template #monthviewInactiveDisplayEventTemplate let-view="view" let-row="row" let-col="col">
{{view.dates[row*7+col].label}}
</ng-template>
<calendar ... [monthviewInactiveDisplayEventTemplate]="monthviewInactiveDisplayEventTemplate"></calendar>
<ng-template #monthviewEventDetailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
...
</ng-template>
<calendar ... [monthviewEventDetailTemplate]="monthviewEventDetailTemplate"></calendar>
<ng-template #weekviewHeaderTemplate let-viewDate="viewDate">
<div class="custom-day-header"> {{ viewDate.dayHeader }} </div>
</ng-template>
<calendar ... [weekviewHeaderTemplate]="weekviewHeaderTemplate"></calendar>
<ng-template #weekviewAllDayEventTemplate let-displayEvent="displayEvent">
<div class="calendar-event-inner">{{displayEvent.event.title}}</div>
</ng-template>
<calendar ... [weekviewAllDayEventTemplate]="weekviewAllDayEventTemplate"></calendar>
<ng-template #weekviewNormalEventTemplate let-displayEvent="displayEvent">
<div class="calendar-event-inner">{{displayEvent.event.title}}</div>
</ng-template>
<calendar ... [weekviewNormalEventTemplate]="weekviewNormalEventTemplate"></calendar>
<ng-template #dayviewAllDayEventTemplate let-displayEvent="displayEvent">
<div class="calendar-event-inner">{{displayEvent.event.title}}</div>
</ng-template>
<calendar ... [dayviewAllDayEventTemplate]="dayviewAllDayEventTemplate"></calendar>
<ng-template #dayviewNormalEventTemplate let-displayEvent="displayEvent">
<div class="calendar-event-inner">{{displayEvent.event.title}}</div>
</ng-template>
<calendar ... [dayviewNormalEventTemplate]="dayviewNormalEventTemplate"></calendar>
<ng-template #weekviewAllDayEventSectionTemplate let-day="day" let-eventTemplate="eventTemplate">
<div [ngClass]="{'calendar-event-wrap': day.events}" *ngIf="day.events"
[ngStyle]="{height: 25*day.events.length+'px'}">
<div *ngFor="let displayEvent of day.events" class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[ngStyle]="{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</div>
</ng-template>
<calendar ... [weekviewAllDayEventSectionTemplate]="weekviewAllDayEventSectionTemplate"></calendar>
<ng-template #weekviewNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
<div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
<div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</div>
</ng-template>
<calendar ... [weekviewNormalEventSectionTemplate]="weekviewNormalEventSectionTemplate"></calendar>
<ng-template #dayviewAllDayEventSectionTemplate let-allDayEvents="allDayEvents" let-eventTemplate="eventTemplate">
<div *ngFor="let displayEvent of allDayEvents; let eventIndex=index"
class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[ngStyle]="{top: 25*eventIndex+'px',width: '100%',height:'25px'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</ng-template>
<calendar ... [dayviewAllDayEventSectionTemplate]="dayviewAllDayEventSectionTemplate"></calendar>
<ng-template #dayviewNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
<div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
<div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</div>
</ng-template>
<calendar ... [dayviewNormalEventSectionTemplate]="dayviewNormalEventSectionTemplate"></calendar>
<ng-template #weekviewInactiveAllDayEventSectionTemplate let-day="day" let-eventTemplate="eventTemplate">
<div [ngClass]="{'calendar-event-wrap': day.events}" *ngIf="day.events"
[ngStyle]="{height: 25*day.events.length+'px'}">
<div *ngFor="let displayEvent of day.events" class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[ngStyle]="{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</div>
</ng-template>
<calendar ... [weekviewInactiveAllDayEventSectionTemplate]="weekviewInactiveAllDayEventSectionTemplate"></calendar>
<ng-template #weekviewInactiveNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
<div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
<div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</div>
</ng-template>
<calendar ... [weekviewInactiveNormalEventSectionTemplate]="weekviewInactiveNormalEventSectionTemplate"></calendar>
<ng-template #dayviewInactiveAllDayEventSectionTemplate let-allDayEvents="allDayEvents" let-eventTemplate="eventTemplate">
<div *ngFor="let displayEvent of allDayEvents; let eventIndex=index"
class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[ngStyle]="{top: 25*eventIndex+'px',width: '100%',height:'25px'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</ng-template>
<calendar ... [dayviewInactiveAllDayEventSectionTemplate]="dayviewInactiveAllDayEventSectionTemplate"></calendar>
<ng-template #dayviewInactiveNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
<div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
<div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
(click)="onEventSelected(displayEvent.event)"
[ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
<ng-template [ngTemplateOutlet]="eventTemplate"
[ngTemplateOutletContext]="{displayEvent:displayEvent}">
</ng-template>
</div>
</div>
</ng-template>
<calendar ... [dayviewInactiveNormalEventSectionTemplate]="dayviewInactiveNormalEventSectionTemplate"></calendar>
EventSource is an array of event object which contains at least below fields:
var startTime = new Date(Date.UTC(2014, 4, 8));
var endTime = new Date(Date.UTC(2014, 4, 9));
Note The calendar only watches for the eventSource reference for performance consideration. That means only you manually reassign the eventSource value, the calendar gets notified, and this is usually fit to the scenario when the range is changed, you load a new data set from the backend. In case you want to manually insert/remove/update the element in the eventSource array, you can call instance method ‘loadEvents’ event to notify the calendar manually.
import { CalendarComponent } from "ionic2-calendar";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild(CalendarComponent, null) myCalendar:CalendarComponent;
eventSource;
…
loadEvents: function() {
this.eventSource.push({
title: 'test',
startTime: startTime,
endTime: endTime,
allDay: false
});
this.myCalendar.loadEvents();
}
}
import { CalendarComponent } from "ionic2-calendar";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild(CalendarComponent, null) myCalendar:CalendarComponent;
…
slideNext: function() {
this.myCalendar.slideNext();
}
}
import { CalendarComponent } from "ionic2-calendar";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild(CalendarComponent, null) myCalendar:CalendarComponent;
…
slidePrev: function() {
this.myCalendar.slidePrev();
}
}
import { CalendarComponent } from "ionic2-calendar";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild(CalendarComponent, null) myCalendar:CalendarComponent;
…
slidePrev: function() {
this.myCalendar.update();
}
}
You could use locale option to achieve the localization.
If locale option is not specified, the calendar will use the LOCALE_ID set at the module level.
By default, the LOCALE_ID is en-US. You can override it in the module as below. If you pass undefined, the LOCALE_ID will be detected using the browser language setting. But using explicit value is recommended, as browser has different level of localization support.
Note that the event detail section in the month view doesn't support locale option, only LOCALE_ID takes effect. This is because it uses DatePipe in html directly. You could easily leverage customized event detail template to switch to other locale.
import { NgModule, LOCALE_ID } from '@angular/core';
@NgModule({
…
providers: [
{ provide: LOCALE_ID, useValue: 'zh-CN' }
]
})
For version 0.4.x+ which depends on Ionic 3.9.2+ and Angular 5.0+, locale module needs to be registered explicitly in module file as below.
import { registerLocaleData } from '@angular/common';
import localeZh from '@angular/common/locales/zh';
registerLocaleData(localeZh);
If you want to change the locale dynamically, you should use locale option instead of LOCALE_ID.
In the CPU profile, the default Intl based localization code occupies a big portion of the execution time. If you don’t need localization on certain parts, you can use the custom dateFormatter to override the date transform method. For example, the date in month view usually doesn’t require localization, you could use below code to just display the date part. If the month view day header doesn’t need to include the date, you could also use a string array containing static labels to save the date calculation.
<calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>
calendar = {
dateFormatter: {
formatMonthViewDay: function(date:Date) {
return date.getDate().toString();
}
}
};
This component updates the ion-slide dynamically so that only 3 looped slides are needed.
The ion-slide in Ionic2 uses Swiper. It seems in the Swiper implementation, the next slide after the end of looped slide is a separate cached slide, instead of the first slide.
I can't find out a way to force refresh that cached slide, so you will notice that when sliding from the third month to the forth month, the preview month is not the forth month, but the first month.
Once the sliding is over, the slide will be forced to render the forth month.
Error: Cannot find module "intl"
Answer: This calendar has dependency on 'Intl'. Run npm install intl@1.2.5 to install the dependency
Error: Cannot read property 'getFullYear' of undefined
Answer: If you bind currentDate like this: [currentDate]="calendar.currentDate". You need to assign calendar.currentDate a valid Date object
How to switch the calendar to previous/next month programmatically?
Answer: You can change currentDate to the date in previous/next month. You could also call the instance method slideNext/slidePrev.
Error: Cannot read property 'dayHeaders' of undefined
Answer: Take a look at the Localization section. For version 0.4.x+, you need to manually register the locale.
Error: TypeError: event_1.startTime.getTime is not a function
Answer: This is due to the startTime field of the event object is not a valid Date object. Be aware that different browser has different implementation of new Date() constructor. Some date string format may not be supported. It is recommended to use millisecond or year/month/date parameters.
Error: How to override css
Answer: By default, the css applied on each component is view encapsulated, for example, .table-bordered[_ngcontent-jto-c5]. You need to remove the encapsulated part.
.table-bordered[_ngcontent-jto-c5] {
border: 1px solid #ddd !important;
}
FAQs
Ionic calendar component
The npm package ionic7-calendar receives a total of 93 weekly downloads. As such, ionic7-calendar popularity was classified as not popular.
We found that ionic7-calendar demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
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.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."