ionic2-calendar - npm Package Compare versions

Comparing version 0.2.18 to 0.2.19

calendar.module.ngfactory.ts

@@ -37,10 +37,10 @@ /**
 import * as import28 from '@angular/core/src/di/injector';
-import * as import29 from 'ionic-angular/components/action-sheet/action-sheet-component.ngfactory';
-import * as import30 from 'ionic-angular/components/alert/alert-component.ngfactory';
-import * as import31 from 'ionic-angular/components/app/app-root.ngfactory';
-import * as import32 from 'ionic-angular/components/loading/loading-component.ngfactory';
-import * as import33 from 'ionic-angular/components/modal/modal-component.ngfactory';
-import * as import34 from 'ionic-angular/components/picker/picker-component.ngfactory';
-import * as import35 from 'ionic-angular/components/popover/popover-component.ngfactory';
-import * as import36 from 'ionic-angular/components/toast/toast-component.ngfactory';
+import * as import29 from '../node_modules/ionic-angular/components/action-sheet/action-sheet-component.ngfactory';
+import * as import30 from '../node_modules/ionic-angular/components/alert/alert-component.ngfactory';
+import * as import31 from '../node_modules/ionic-angular/components/app/app-root.ngfactory';
+import * as import32 from '../node_modules/ionic-angular/components/loading/loading-component.ngfactory';
+import * as import33 from '../node_modules/ionic-angular/components/modal/modal-component.ngfactory';
+import * as import34 from '../node_modules/ionic-angular/components/picker/picker-component.ngfactory';
+import * as import35 from '../node_modules/ionic-angular/components/popover/popover-component.ngfactory';
+import * as import36 from '../node_modules/ionic-angular/components/toast/toast-component.ngfactory';
 import * as import37 from './calendar.ngfactory';
@@ -304,2 +304,2 @@ import * as import38 from '@angular/core/src/i18n/tokens';
 }
-export const NgCalendarModuleNgFactory:import0.NgModuleFactory<import1.NgCalendarModule> = new import0.NgModuleFactory(NgCalendarModuleInjector,import1.NgCalendarModule);
+export const NgCalendarModuleNgFactory:import0.NgModuleFactory<import1.NgCalendarModule> = new import0.NgModuleFactory(NgCalendarModuleInjector,import1.NgCalendarModule);

init-position-scroll.ngfactory.ts

@@ -19,3 +19,3 @@ /**
 import * as import10 from 'ionic-angular/components/scroll/scroll';
-import * as import11 from 'ionic-angular/components/scroll/scroll.ngfactory';
+import * as import11 from '../node_modules/ionic-angular/components/scroll/scroll.ngfactory';
 export class Wrapper_initPositionScrollComponent {
@@ -214,2 +214,2 @@ /*private*/ _eventHandler:Function;
   }
-}
+}

package.json

 {
     "name": "ionic2-calendar",
-    "version": "0.2.18",
+    "version": "0.2.19",
     "description": "Ionic2 calendar component",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -165,3 +165,3 @@ # Ionic2-Calendar directive
 * autoSelect  
-If set to true, the current calendar date will be auto selected when calendar is loaded or swiped in the month view.  
+If set to true, the current calendar date will be auto selected when calendar is loaded or swiped in the month and week view.  
 Default value: true
@@ -242,5 +242,6 @@ * locale
 Default value: false
-
+``` html
         <calendar ... [lockSwipeToPrev]="lockSwipeToPrev"></calendar>
-
+```
+``` typescript
         onCurrentDateChanged(event:Date) {
@@ -259,2 +260,3 @@ var today = new Date();
         }
+```
 
@@ -268,3 +270,3 @@ * lockSwipes
 ```
-``` javascript
+``` typescript
         ngAfterViewInit() {
@@ -302,3 +304,4 @@ var me = this;
         <calendar ... (onCurrentDateChanged)="onCurrentDateChanged($event)"></calendar>
-
+```
+``` typescript
         onCurrentChanged = (ev: Date) => {
@@ -313,3 +316,4 @@ console.log('Currently viewed date: ' + ev);
         <calendar ... (onRangeChanged)="onRangeChanged($event)"></calendar>
-
+```
+``` typescript
         onRangeChanged = (ev: { startTime: Date, endTime: Date }) => {
@@ -325,3 +329,4 @@ Events.query(ev, (events) => {
         <calendar ... (onEventSelected)="onEventSelected($event)"></calendar>
-
+```
+``` typescript
         onEventSelected = (event) => {
@@ -336,5 +341,6 @@ console.log(event.title);
         <calendar ... (onTimeSelected)="onTimeSelected($event)"></calendar>
-
-        onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
-            console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
+```
+``` typescript
+    onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
+        console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
         };
@@ -346,3 +352,4 @@ ```
         <calendar ... (onTitleChanged)="onViewTitleChanged($event)"></calendar>
-
+```
+``` typescript
         onViewTitleChanged = (title: string) => {
@@ -354,2 +361,42 @@ this.viewTitle = title;
 # View Customization Option
+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.
+
+## CSS Customization  
+
+* 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
+
+* week-view-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
+
+
+## Template Customization  
+
 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.   
@@ -387,2 +434,12 @@
 ```
+* weekviewHeaderTemplate (version >= 0.4.5)  
+Type: TemplateRef\<IDisplayWeekViewHeader\>     
+The template provides customized view for day header in the weekview 
+``` html 
+    <ng-template #template let-viewDate="viewDate"> 
+        <div class="custom-day-header"> {{ viewDate.dayHeader }} </div> 
+    </ng-template> 
+ 
+    <calendar ... [weekviewHeaderTemplate]="template"></calendar>
+```
 * weekviewAllDayEventTemplate    
@@ -430,3 +487,3 @@ Type: TemplateRef\<IDisplayAllDayEvent\>
 
-        <calendar ... [dayviewNormalEventTemplate]="template"></calendar>
+    <calendar ... [dayviewNormalEventTemplate]="template"></calendar>
 ```
@@ -436,3 +493,3 @@
 Type: TemplateRef\<IWeekViewAllDayEventSectionTemplateContext\>    
-The template provides customized view for all day event section in the weekview
+The template provides customized view for all day event section (table part) in the weekview
 
@@ -447,3 +504,3 @@ ``` html
                     <ng-template [ngTemplateOutlet]="eventTemplate"
-                                 [ngOutletContext]="{displayEvent:displayEvent}">
+                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                     </ng-template>
@@ -459,3 +516,3 @@ </div>
 Type: TemplateRef\<IWeekViewNormalEventSectionTemplateContext\>    
-The template provides customized view for normal event section in the weekview
+The template provides customized view for normal event section (table part) in the weekview
 
@@ -469,3 +526,3 @@ ``` html
                     <ng-template [ngTemplateOutlet]="eventTemplate"
-                                 [ngOutletContext]="{displayEvent:displayEvent}">
+                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                     </ng-template>
@@ -481,3 +538,3 @@ </div>
 Type: TemplateRef\<IDayViewAllDayEventSectionTemplateContext\>    
-The template provides customized view for all day event section in the dayview
+The template provides customized view for all day event section (table part) in the dayview
 
@@ -491,3 +548,3 @@ ``` html
                 <ng-template [ngTemplateOutlet]="eventTemplate"
-                             [ngOutletContext]="{displayEvent:displayEvent}">
+                             [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                 </ng-template>
@@ -502,3 +559,3 @@ </div>
 Type: TemplateRef\<IDayViewNormalEventSectionTemplateContext\>    
-The template provides customized view for normal event section in the dayview
+The template provides customized view for normal event section (table part) in the dayview
 
@@ -512,3 +569,3 @@ ``` html
                     <ng-template [ngTemplateOutlet]="eventTemplate"
-                                 [ngOutletContext]="{displayEvent:displayEvent}">
+                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                     </ng-template>
@@ -605,3 +662,4 @@ </div>
 <calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>
-
+```
+``` typescript
 calendar = {
@@ -637,2 +695,2 @@ dateFormatter: {
 * 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.

weekview.js

@@ -90,3 +90,3 @@ import { DatePipe } from '@angular/common';
         }
-        var lockSwipes = changes['lockSwipesv'];
+        var lockSwipes = changes['lockSwipes'];
         if (lockSwipes) {
@@ -93,0 +93,0 @@ this.slider.lockSwipes(lockSwipes.currentValue);

New alerts

License Policy Violation

License

This 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

License

This 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

1217024

increased by0.2%

Number of lines in readme file

675

increased by9.58%

Worsened metrics

Lines of code

14264

decreased by-0.04%

No dependency changes