Responsive Angular calendar and date picker
Highly customizable mobile & desktop calendar for Angular and Ionic Angular
Date & time picker component featuring calendar month view, week view, date scroller and time picker.
Use it as angular components or directives that you can use on existing components.
Compatible with mobiscroll forms, custom inputs, ion-inputs & more
Shipping with useful features for a refined UX, including:
- Usage on mobile and desktop with responsive features
- Single and multiple select
- Week select
- Date & time select
- Validation with disabled dates, min & max for restricting selection
- Marked days
- Week counter
- Multiple month view
- Fullscreen view
- Modal, popup and inline display support
- RTL Support
- Full localization
Angular and Ionic Calendar
Calendar for Angular and Ionic 2/3/4/5
Change the theme setting here
Change the language and localization settings here
Calendar - Date types
Calendar - Mobile display modes
Different display modes can be used for mobile and desktop. On mobile, the calendar can be rendered at the top or bottom of the screen, in the center of the screen, anchored to an input or any object for that matter and it can also be embedded in any inline content.
Calendar - Variable week view
The calendar view supports variable weeks. Save space by only displaying one or two weeks or go for a full month where it makes sense.
weeks setting that expects a number of rows. The default is six weeks, but feel free to play around.
Calendar - Week to month view
While the calendar supports variable week views there are cases when you don't want to commit to a single setup. Get the best of both worlds by dynamically letting the users switch between a week-view and a full month-view.
Use the compact
week-view to save space and programatically switch to a
month-view when users need the full context of a month.
Calendar - Setting invalids
Disable dates with the
invalid setting. It supports
recurring dates and
Time can also be invalidated by passing
exact values and
Using invalids is essential to a great UX. First make sure you have the min & max values right and then work your way back to invalids.
If you would like to re-enable dates inside an invalid range, you can do it with the
Having it set up correctly not just enhances the UX, but improves performance.
Calendar - Marked days
Calendar - Setting values
Values can change a couple different ways: though defaults, intracting with the UI or programatically. The calendar defaults to
now, which can be easily overridden with the
Values are set by interacting with the component and making a selection or it can be done programatically with the
buttons setting for showing/hiding
now or add custom buttons.
Calendar - Formatting values
Calendar - RTL Support
Calendar - Event hooks
The calendar ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
While users interact with the UI events like
onInit ... will be triggered.
Interact with the example and check the event log for the output.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.