Set of Angular components to display day, week, and month calendars with events.
http://spongessuck.github.io/ng2/demos/#/gm.calendar2
Displays a month view calendar.
<gm-month-view [date]="date" [items]="items"></gm-month-view>
Sets the month displayed by the component based on the month and year.
Sets the items displayed on the calendar.
Used to distinguish between dates in a different month than the one displayed. Set this in the global styles of your application.
/* Give dates in a different month a slightly gray background */
.gm-different-month {
background-color: #eee;
}
Displays the times of day and their demarcation lines. Place your gm-day-view
components in one of these.
<gm-day-view-container [scrollToHour]="firstHourToShow"></gm-day-view-container>
The hour of the day to scroll to, from 0-23. Only works if the parent element of gm-day-view-container
has a height smaller than gm-day-view-container
and has its overflow
style set to something other than visible
.
A container element to hold gm-day-view
components with events that last all day. Should be placed in an element with a specific height set.
<gm-all-day-view-container></gm-day-view-container>
This element pushes the gm-day-view
components to make room for the time-of-day labels. You can set your own style rules to change the width.
Shows a day view with events spanning their startTime
and endTime
properties.
<gm-day-view [isToday]="isToday"></gm-day-view>
Determines if the component should render a line designating the current time.
Placed inside gm-day-view
elements to display the event details.
In order for these items to be positioned properly, they must implement the GmEventItem
interface, and you must pass your array of events to eventItemsToDayViewItems
, which is exported by the main module.
eventItemsToDayViewItems
analyzes the event items to find overlaps in their start and end times so that they can be arranged adjacently.
...
import { GmDayViewItem,
eventItemsToDayViewItems } from 'gm.calendar2'
@Component
...
items: GmDayViewItem[] = eventItemsToDayViewItems([
{
title: 'My Event',
startTime: {
hours: 12,
minutes: 00
},
endTime: {
hours: 12,
minutes: 30
}
}
]);
...
<gm-event-view *ngFor="let item of items" [item]="item">
{{item.title}}
</gm-event-view>
These items have no style by default.
An item returned by eventItemsToDayViewItems
.
This element holds whatever you put inside <gm-event-view>
. You should set style rules for this class in your application global stylesheet.
Run ng serve
to run the example app. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive/pipe/service/class/module
.
Run npm run build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve
.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.