Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
ionic2-calendar
Advanced tools
ionic2-calendar - npm Package Compare versions
Comparing version 0.2.17 to 0.2.18
| { | ||
| "name": "ionic2-calendar", | ||
| "version": "0.2.17", | ||
| "version": "0.2.18", | ||
| "description": "Ionic2 calendar component", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
153
README.md
@@ -15,3 +15,3 @@ # Ionic2-Calendar directive | ||
| version 0.2.9+ depends on Ionic 2.3.0 version onwards. | ||
| version 0.3.x depends on Ionic 3.1.1 version onwards. | ||
| version 0.3.x depends on Ionic 3.1.1 version onwards. | ||
| version 0.4.x depends on Ionic 3.9.2 version onwards. | ||
@@ -151,4 +151,16 @@ | ||
| * step | ||
| It can be set to 15 or 30, so that the event can be displayed at more accurate position in weekview or dayview. | ||
| It is used to display the event using more accurate time interval in weekview and dayview. For example, if set to 30, then the event will only occupy half of the row height (If timeInterval option uses default value). The unit is minute. It can be set to 15 or 30. | ||
| Default value: 60 | ||
| ``` html | ||
| <calendar ... [step]="30"></calendar> | ||
| ``` | ||
| * timeInterval (version >= 0.3) | ||
| It is used to display the rows using more accurate time interval in weekview and dayview. For example, if set to 30, then the time interval between each row is 30 mins. | ||
| The unit is minute. It should be the factor or multiple of 60, which means 60%timeInterval=0 or timeInterval%60=0. | ||
| Default value: 60 | ||
| ``` html | ||
| <calendar ... [timeInterval]="30"></calendar> | ||
| ``` | ||
| * autoSelect | ||
@@ -335,3 +347,3 @@ If set to true, the current calendar date will be auto selected when calendar is loaded or swiped in the month view. | ||
| # View Customization Option | ||
| 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. | ||
| 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. | ||
@@ -342,5 +354,5 @@ * monthviewDisplayEventTemplate | ||
| ``` html | ||
| <template #template let-view="view" let-row="row" let-col="col"> | ||
| <ng-template #template let-view="view" let-row="row" let-col="col"> | ||
| {{view.dates[row*7+col].label}} | ||
| </template> | ||
| </ng-template> | ||
@@ -353,5 +365,5 @@ <calendar ... [monthviewDisplayEventTemplate]="template"></calendar> | ||
| ``` html | ||
| <template #template let-view="view" let-row="row" let-col="col"> | ||
| <ng-template #template let-view="view" let-row="row" let-col="col"> | ||
| {{view.dates[row*7+col].label}} | ||
| </template> | ||
| </ng-template> | ||
@@ -364,5 +376,5 @@ <calendar ... [monthviewInactiveDisplayEventTemplate]="template"></calendar> | ||
| ``` html | ||
| <template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"> | ||
| <ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"> | ||
| ... | ||
| </template> | ||
| </ng-template> | ||
@@ -375,7 +387,7 @@ <calendar ... [monthviewEventDetailTemplate]="template"></calendar> | ||
| ``` html | ||
| <template #template let-displayEvent="displayEvent"> | ||
| <div class="calendar-event-inner">{{displayEvent.event.title}}</div> | ||
| </template> | ||
| <ng-template #template let-displayEvent="displayEvent"> | ||
| <div class="calendar-event-inner">{{displayEvent.event.title}}</div> | ||
| </ng-template> | ||
| <calendar ... [weekviewAllDayEventTemplate]="template"></calendar> | ||
| <calendar ... [weekviewAllDayEventTemplate]="template"></calendar> | ||
| ``` | ||
@@ -387,29 +399,28 @@ * weekviewNormalEventTemplate | ||
| ``` html | ||
| <template #template let-displayEvent="displayEvent"> | ||
| <div class="calendar-event-inner">{{displayEvent.event.title}}</div> | ||
| </template> | ||
| <ng-template #template let-displayEvent="displayEvent"> | ||
| <div class="calendar-event-inner">{{displayEvent.event.title}}</div> | ||
| </ng-template> | ||
| <calendar ... [weekviewNormalEventTemplate]="template"></calendar> | ||
| <calendar ... [weekviewNormalEventTemplate]="template"></calendar> | ||
| ``` | ||
| * dayviewAllDayEventTemplate | ||
| * dayviewAllDayEventTemplate | ||
| Type: TemplateRef\<IDisplayAllDayEvent\> | ||
| The template provides customized view for all day event in the dayview | ||
| ``` html | ||
| <template #template let-displayEvent="displayEvent"> | ||
| <div class="calendar-event-inner">{{displayEvent.event.title}}</div> | ||
| </template> | ||
| <ng-template #template let-displayEvent="displayEvent"> | ||
| <div class="calendar-event-inner">{{displayEvent.event.title}}</div> | ||
| </ng-template> | ||
| <calendar ... [dayviewAllDayEventTemplate]="template"></calendar> | ||
| <calendar ... [dayviewAllDayEventTemplate]="template"></calendar> | ||
| ``` | ||
| * dayviewNormalEventTemplate | ||
| * dayviewNormalEventTemplate | ||
| Type: TemplateRef\<IDisplayEvent\> | ||
| The template provides customized view for normal event in the dayview | ||
| ``` javascript | ||
| <template #template let-displayEvent="displayEvent"> | ||
| ``` html | ||
| <ng-template #template let-displayEvent="displayEvent"> | ||
| <div class="calendar-event-inner">{{displayEvent.event.title}}</div> | ||
| </template> | ||
| </ng-template> | ||
@@ -419,2 +430,82 @@ <calendar ... [dayviewNormalEventTemplate]="template"></calendar> | ||
| * weekviewAllDayEventSectionTemplate (version >= 0.3) | ||
| Type: TemplateRef\<IWeekViewAllDayEventSectionTemplateContext\> | ||
| The template provides customized view for all day event section in the weekview | ||
| ``` html | ||
| <ng-template #template 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" | ||
| [ngOutletContext]="{displayEvent:displayEvent}"> | ||
| </ng-template> | ||
| </div> | ||
| </div> | ||
| </ng-template> | ||
| <calendar ... [weekviewAllDayEventSectionTemplate]="template"></calendar> | ||
| ``` | ||
| * weekviewNormalEventSectionTemplate (version >= 0.3) | ||
| Type: TemplateRef\<IWeekViewNormalEventSectionTemplateContext\> | ||
| The template provides customized view for normal event section in the weekview | ||
| ``` html | ||
| <ng-template #template 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" | ||
| [ngOutletContext]="{displayEvent:displayEvent}"> | ||
| </ng-template> | ||
| </div> | ||
| </div> | ||
| </ng-template> | ||
| <calendar ... [weekviewNormalEventSectionTemplate]="template"></calendar> | ||
| ``` | ||
| * dayviewAllDayEventSectionTemplate (version >= 0.3) | ||
| Type: TemplateRef\<IDayViewAllDayEventSectionTemplateContext\> | ||
| The template provides customized view for all day event section in the dayview | ||
| ``` html | ||
| <ng-template #template 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" | ||
| [ngOutletContext]="{displayEvent:displayEvent}"> | ||
| </ng-template> | ||
| </div> | ||
| </ng-template> | ||
| <calendar ... [dayviewAllDayEventSectionTemplate]="template"></calendar> | ||
| ``` | ||
| * dayviewNormalEventSectionTemplate (version >= 0.3) | ||
| Type: TemplateRef\<IDayViewNormalEventSectionTemplateContext\> | ||
| The template provides customized view for normal event section in the dayview | ||
| ``` html | ||
| <ng-template #template 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" | ||
| [ngOutletContext]="{displayEvent:displayEvent}"> | ||
| </ng-template> | ||
| </div> | ||
| </div> | ||
| </ng-template> | ||
| <calendar ... [dayviewNormalEventSectionTemplate]="template"></calendar> | ||
| ``` | ||
| # EventSource | ||
@@ -430,3 +521,3 @@ | ||
| ``` javascript | ||
| var startTime = new Date(Date.UTC(2014, 4, 8)); | ||
| var startTime = new Date(Date.UTC(2014, 4, 8)); | ||
| ``` | ||
@@ -438,3 +529,3 @@ | ||
| ``` javascript | ||
| var endTime = new Date(Date.UTC(2014, 4, 9)); | ||
| var endTime = new Date(Date.UTC(2014, 4, 9)); | ||
| ``` | ||
@@ -477,3 +568,3 @@ * allDay | ||
| 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. | ||
| 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. | ||
@@ -537,2 +628,2 @@ ``` typescript | ||
| * 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. | ||
| Answer: Take a look at the Localization section. For version 0.4.x, you need to manually register the locale. |
@@ -285,7 +285,12 @@ import { DatePipe } from '@angular/common'; | ||
| var endRowIndex = void 0; | ||
| if (endOfDay <= endIndex) { | ||
| if (endOfDay < endIndex) { | ||
| endRowIndex = 24; | ||
| } | ||
| else { | ||
| endRowIndex = endIndex % 24; | ||
| if (endOfDay === endIndex) { | ||
| endRowIndex = 24; | ||
| } | ||
| else { | ||
| endRowIndex = endIndex % 24; | ||
| } | ||
| if (this.hourParts !== 1) { | ||
@@ -292,0 +297,0 @@ if (endRowIndex > this.endHour) { |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.47%
1214655
- Lines of code
- increased by0.04%
14270
- Number of lines in readme file
- increased by17.11%
616
No dependency changes