twinssbc / ionic2-calendar Goto Github PK
View Code? Open in Web Editor NEWA calendar component based on Ionic framework
Home Page: https://ionic-calendar-demo.stackblitz.io
License: MIT License
A calendar component based on Ionic framework
Home Page: https://ionic-calendar-demo.stackblitz.io
License: MIT License
When swiping in dayview or weekview the scroll-point is not saved.
This means if I scroll to the bottom and then swipe the scroll position will be again at the top (12am).
The components are not working anymore since I upgraded to RC5. This is probably due to the breaking changes on the slides component
What's the proper way to add events to eventSource and refresh the calendar to display them ?
Hi.
When i try emulate or build:
[23:40:22] Error: Error at /Users/vlad/apps/eveses3/.tmp/pages/full/full.ngfactory.ts:149:36
[23:40:22] Module ''*'' has no exported member 'Wrapper_CalendarComponent'.
[23:40:22] ngc failed
[23:40:22] ionic-app-script task: "build"
[23:40:22] Error: Error
npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ build: ionic-app-scripts build
npm ERR! Exit status 1
This option runs as it should on the browser, but it seems the default value is used when running inside an emulator/(smartphone?).
Thanks for your help.
Hi,
I would like to know if this is possible:
Someone can help me?
Thanks!
Hi,
I use your components in ionic 2 rc.3
I import components in main.prod.ts but it can't build.
Someone can help me?
Thanks a lot
Is it possible to show left and right arrows in week view to move to next and previous week. Now only swipe is possible
when change calendar mode by funcationally (not button click) this.calendar.mode = mode; not working
It runs well on iOS devices, but not in non-modern Androids, especially on the sliding weeks. Is there any workaround can improve it?
i tried to integrate date picker bu ti am getting this error:
Runtime Error
Cannot find module "intl"
stacktrace:
Error: Cannot find module "intl"
at Object. (http://localhost:8100/build/main.js:108974:7)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:109354:75)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:90056:74)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:123658:70)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at http://localhost:8100/build/main.js:66:18
at http://localhost:8100/build/main.js:69:10
Any help please
After installing the module using the regular command:
npm install ionic2-calendar --save
I get this error message as soon as the app loads:
EXCEPTION: Error in ./CalendarComponent class CalendarComponent - inline template:35:16 caused by: Cannot read property 'getFullYear' of undefined
I have debugged and found that the error occurs on line 160 on the file monthview.js
.
In the following function the currentDate
object parameter comes in as undefined
:
MonthViewComponent.prototype.getRange = function (currentDate) {
//-- NEXT LINE THROWS AN EXCEPTION BECAUSE currentDate IS undefined
var year = currentDate.getFullYear(), month = currentDate.getMonth(), firstDayOfMonth = new Date(year, month, 1), difference = this.startingDayMonth - firstDayOfMonth.getDay(), numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference, startDate = new Date(firstDayOfMonth.getTime());
if (numDisplayedFromPreviousMonth > 0) {
startDate.setDate(-numDisplayedFromPreviousMonth + 1);
}
var endDate = new Date(startDate.getTime());
endDate.setDate(endDate.getDate() + 42);
return {
startTime: startDate,
endTime: endDate
};
};
Hi,
I am on angular 2.2.3 and I have installed intl 1.2.5 to can use this calendar.
When I try to serve it shows me an error
Uncaught ReferenceError: IntlPolyfill is not defined
at http://192.168.1.87:8100/build/main.js:108347:4
at http://192.168.1.87:8100/build/main.js:125146:2
And dont shows me more information.
Someone has any idea to what can be the problem?
Here is my package.json
{
"name": "xxxxx",
"author": "xxxxx",
"version": "1.0.0",
"homepage": "xxxxx",
"private": true,
"scripts": {
"build": "ionic-app-scripts build",
"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "build",
"deploy:before": "build",
"build:before": "build",
"run:before": "build"
},
"dependencies": {
"@angular/common": "^2.0.0",
"@angular/compiler": "^2.0.0",
"@angular/compiler-cli": "^0.6.2",
"@angular/core": "^2.0.0",
"@angular/forms": "^2.0.0",
"@angular/http": "^2.0.0",
"@angular/platform-browser": "^2.0.0",
"@angular/platform-browser-dynamic": "^2.0.0",
"@angular/platform-server": "^2.0.0",
"@ionic/storage": "^1.1.6",
"intl": "^1.2.5",
"ionic-angular": "^2.0.0-rc.3",
"ionic-native": "^2.0.3",
"ionic2-calendar": "0.0.15",
"ionicons": "^3.0.0",
"moment": "2.17.1",
"rxjs": "^5.0.0-beta.12",
"zone.js": "^0.6.21"
},
"devDependencies": {
"@ionic/app-scripts": "^0.0.30",
"typescript": "^2.0.3"
},
"config": {
"ionic_bundler": "webpack"
},
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard",
"cordova-plugin-crosswalk-webview"
],
"cordovaPlatforms": [
"ios",
"android"
],
"description": "xxxxxxx"
}
Thanks!
Hi!!
I´m running the app with ionic run android command using API23 of Android and the app behaviour is diferent that when I run the application with ionic serve.
The issue appears just when the app is started due to the active index of slider components is 2 (me.slider.getActiveIndex()).
When I obtain this index testing in the device is 2, and when I test it in the browser is 0 (the expected value)
Could you know why this result?
When clicking on a day in monthview that is after march 26 the day before is selected. This is probably due to day light saving change.
Hi
I tried to use the ionic2-Calendar but I get the below error when I try to run the app by ionic serve
Cannot find module "intl"
Error: Cannot find module "intl"
at Object. (http://localhost:8100/build/main.js:117496:7)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:117876:75)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:94583:74)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:133104:70)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at http://localhost:8100/build/main.js:66:18
at http://localhost:8100/build/main.js:69:10
p.s I installed intl by npm install -g intl and still error
Would you please help me out
Hi I have been following your documentation, works for ionic serve, but ionic emulate fails with this error
[17:59:47] Error: Unexpected value 'NgCalendarModule' imported by the module 'AppModule'
[17:59:47] ngc failed
[17:59:47] ionic-app-script task: "build"
[17:59:47] Error: Error
ionic info
Your system information:
Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.36
OS:
Node Version: v5.12.0
package.json
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/compiler-cli": "0.6.2",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@ionic/storage": "^1.0.3",
"ionic-angular": "^2.0.0-rc.0",
"ionic-native": "^2.0.3",
"ionic2-calendar": "0.0.9",
"ionicons": "^3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.21"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.36",
"typescript": "^2.0.3"
},
app.module.ts
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { NgCalendarModule } from 'ionic2-calendar';
import { MapPage } from '../pages/map/map';
import { EventPage } from '../pages/event/event';
import { EventDetailPage } from '../pages/event-detail/event-detail';
import {EventCalendar} from '../pages/event-calendar/event-calendar'
import { InfoPage } from '../pages/info/info';
import { TabsPage } from '../pages/tabs/tabs';
@NgModule({
declarations: [
MyApp,
MapPage,
EventPage,
EventDetailPage,
EventCalendar,
InfoPage,
TabsPage
],
imports: [
NgCalendarModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
MapPage,
EventPage,
EventDetailPage,
EventCalendar,
InfoPage,
TabsPage
],
providers: []
})
export class AppModule {}
after this I am adding the directive to the html page.
I understand there are changes after ionic rc, should i be doing things differently?
Any help is appreciated!
Is it possible to set the calendar to a specific or local language ?
When week# changed will got about 5~7 sec latency,
No matter in the Dev or run in Android phone (it runs well on iOS devices),
Is there any solution?
Hi
Two questions:
Regards
Actualmente I'm working with ir, but when I click load events the gaps are empty.
Hi,
Whenever I am running npm install ionic2-calendar --save
, I am getting the following:
[email protected] postinstall C:\Users\Emixis\Documents\Ionic2\Apps\MainApp\node_modules\ionic2-calendar
typings install'typings' is not recognized as an internal or external command,
operable program or batch file.
I ran npm install typings --global successfully.
I have added "typings": "2.1.0" to my package.json's dependencies.
The PATH to my npm folder is correct.
Thanks
Is there a way to customize the calendar? In the week view where the full day events are shown, the height of event is set as 25px and also the top is calculated as a multiple of 25px. Is there a way to alter these?
I have a requirement to change the color of the clicked event so that the user will know which event is clicked. Is that possible? I can see this happening in month view
Thanks in advance.
Hey folks,
I really have to have this great plugin, but how can I use it with the latest Ionic2 version. Here are some more information about my used enviroment:
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.2
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.27
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS
Node Version: v4.2.6
So actually what I did - among your documentation I included it differently, because I was not able to include it like you described it on your Github page neither as described in the README file.
I did the following (File: app.module.ts):
...
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CalendarComponent } from 'ionic2-calendar/ionic2-calendar'
...
@NgModule({
declarations: [
MyApp,
HomePage,
Calendar,
CalendarComponent
],
...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
When I build or serve it I don't get any mistake, but when I try to open it, e.g. in the browser I constantly get this message in the console.
Unhandled Promise rejection: Template parse errors:
Can't bind to 'formatDay' since it isn't a known property of 'monthview'. ("ngSwitch]="calendarMode" class="calendar-container">
<monthview *ngSwitchCase="'month'" [ERROR ->][formatDay]="formatDay" [formatDayHeader]="formatDayHeader" [formatMonthTitle]="formatMonthTitle"
"): CalendarComponent@2:47
Can't bind to 'formatDayHeader' since it isn't a known property of 'monthview'. (" class="calendar-container">
<monthview *ngSwitchCase="'month'" [formatDay]="formatDay" [ERROR ->][formatDayHeader]="formatDayHeader" [formatMonthTitle]="formatMonthTitle"
[startingDayMo"): CalendarComponent@2:71
Can't bind to 'formatMonthTitle' since it isn't a known property of 'monthview'. (" <monthview *ngSwitchCase="'month'" [formatDay]="formatDay" [formatDayHeader]="formatDayHeader" [ERROR ->][formatMonthTitle]="formatMonthTitle"
[startingDayMonth]="startingDayMonth" [showEventDe"): CalendarComponent@2:107
Can't bind to 'startingDayMonth' since it isn't a known property of 'monthview'. ("="formatDay" [formatDayHeader]="formatDayHeader" [formatMonthTitle]="formatMonthTitle"
[ERROR ->][startingDayMonth]="startingDayMonth" [showEventDetail]="showEventDetail" [noEventsLabel]="noEventsLa"): CalendarComponent@3:13
Can't bind to 'showEventDetail' since it isn't a known property of 'monthview'. ("DayHeader" [formatMonthTitle]="formatMonthTitle"
[startingDayMonth]="startingDayMonth" [ERROR ->][showEventDetail]="showEventDetail" [noEventsLabel]="noEventsLabel" [eventSource]="eventSource"
...
and so on...
So what can I do? I need this plugin urgently, because it's excactly what I was looking for.
Thanks,
Oliver
I try to launch the demo site (https://twinssbc.github.io/Ionic2-Calendar/demo/) on Safari on iPhone with iOS 9.3.4 but I do not see anything.
Is there a reason for this?
Thanks in advance
Hi,
I followed the instructions but i get a blank calendar (the calendar div is here).
Can you provide an example a the .ts file to make the directive working ?
Thanks a lot
I am getting the below error in console while trying to build the app into android using the command
ionic run android
[21:00:12] Error: Error at D:/My Works/ITS app Main/ITS/.tmp/pages/calendar/cal
endar.ngfactory.ts:160:36
[21:00:12] Module ''*'' has no exported member 'Wrapper_CalendarComponent'.
[21:00:12] ngc failed
[21:00:12] ionic-app-script task: "build"
[21:00:12] Error: Error
I am using Angular 2.1.1
Is it possible within the current build to limit the number of weeks (on weekview) that a user can swipe? Or if not, is it possible to implement this feature?
For example, I'd like to only allow them to swipe within the current month.
Thanks!
Hi
I have been torn between using your calendar vs fullcalendar. I would like to recommend that instead of building the control from scratch it might be better to simply use something like fullcalendar which has a large set of features and that way you can either customise the views to your liking. Its feature rich and tried and tested by thousands of users and recently they included touch support.
Right now i am probably going to hack out how you implemented swiper and try use your approach with fullcalendar.
Just my 2 cents.
I have added next and prev buttons the calendar week view.
On click of them I am calling the below functions:
nextWeek() {
this.calendar.currentDate = new Date(this.calendar.currentDate.setDate(this.calendar.currentDate.getDate() + 7));
}
prevWeek(){
this.calendar.currentDate = new Date(this.calendar.currentDate.setDate(this.calendar.currentDate.getDate() - 7));
}
This is working fine. But when I swipe right or left, I am getting the next/previous weeks but the calendar.currentDate is not getting updated. i.e., if i click next button after a right swipe, Instead of getting the next week, the current week will load again.
Is there a way where the currentDate will get updated in swipe also?
When running npm install ionic2-calendar --save
Shows these errors
npm ERR! Linux 4.9.5-200.fc25.x86_64
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install" "ionic2-calendar" "--save"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] postinstall: typings install
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic2-calendar package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic2-calendar
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ionic2-calendar
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/myApp/npm-debug.log
Hi,
You could implement an attribute to define what date range tha can be selected?
Ie.: "2018-08-10,2018-08-30", will show only the days between those dates.
Thanks for creating such a fantastic component.
Its almost perfect but just few things i would like to know.
here is how the calendar that we want to look like https://gyazo.com/8b2d678ec14e97a9919326b126cef99b
to make it look like this we just need to know following things.
This is about the Swiper issue as noted in the readme:
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.
It seems to be the exact same issue as this: ionic-team/ionic-framework#6515, an issue when using NgFor
on slides. Some options for workarounds are mentioned there, but I haven't succeeded implementing one so far. Did you already try something like it?
In month view, is it normal when the month is changed, the same day becomes highlighted?
For example, it is selecting 10 May, after swipe and jump to June, 10 June will be highlighted. But onTimeSelected() did not trigger.
HI guys nice work here.
it would be great to support disabling calendar dates, like for 1 day disable a range of hours.
disableEventSource = {
monday: [startDate:8 am: endDate:3pm]
tuesday: same stuff
}
another nice feature would be to show events with different colors. on event source to set event cell class and then in css you can customize appereance of that cel.
run in safrie 10.0.2 i should how to do
More than an issue, this is a question. Sorry if this is not the right place, in that case please tell me what is the best way to ask questions.
I'm considering your component for a new Ionic2 based project. I've a couple of questions:
Thank you very much for your work!
I am not able to see the changes on simulator while applying css changes in calendar.js template.
my code is -
"<div class="calendar-event-inner" [style.backgroundColor]=displayEvent.event.color>{{displayEvent.event.title}}"
where style.backgroundColor is converted to inline css e.g.( background-color: blue) on browser. But not applied for ios simulator.
Please help.
Hi,
to be quick about it, please have a look at this youtube: screenrecorded about the behaviour of the calendar in my app. Can't figure why I can't select any of the days except ones in the first slide and why only 3 slides populated?
Any idea where the issue might be? My code is identical with the one in the demo.
My machine system info:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v5.12.0
Xcode version: Xcode 8.2.1 Build version 8C1002
Thank you.
I follow Readme trying to put calendar in my app. I end up with following error:
polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'loop' since it isn't a known property of 'ion-slides'.
I do check the slides api that says loop is an input property:
loop -- boolean -- If true, continuously loop from the last slide to the first slide.
My ionic version is 2.1.4
What's happening ? Please help, thank you!
In month view, when swiping to the next/previous month, before releasing the cursor/finger and the next/previous is visible, the classes (.text-muted, .monthview-disabled) are not properly applied to those dummy slides.
Which means before releasing the cursor/finger, the layout shown is not visually correct.
I'm looking to pull this into an Ionic2 application using Angular2 final; however, this library only exposes itself as a Directive, which can no longer be declared on a Component directly. Are there any plans of supporting this soon?
Hi.
As per usage procedure, it occurred following error.
5 881004 group EXCEPTION: Error in ./ModalCmp class ModalCmp_Host - inline template:0:0
7 881005 error ORIGINAL EXCEPTION: No Directive annotation found on CalendarComponent
6 881004 error EXCEPTION: Error in ./ModalCmp class ModalCmp_Host - inline template:0:0
8 881005 error ORIGINAL STACKTRACE:
9 881006 error Error: No Directive annotation found on CalendarComponent
at new BaseException (http://localhost:8100/build/js/app.bundle.js:4785:23)
at DirectiveResolver.resolve (http://localhost:8100/build/js/app.bundle.js:12072:15)
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:8100/build/js/app.bundle.js:16978:51)
at http://localhost:8100/build/js/app.bundle.js:17100:62
at Array.map (native)
at CompileMetadataResolver.getViewDirectivesMetadata (http://localhost:8100/build/js/app.bundle.js:17100:27)
at RuntimeCompiler._getCompiledTemplate (http://localhost:8100/build/js/app.bundle.js:21087:36)
at RuntimeCompiler._getTransitiveCompiledTemplates (http://localhost:8100/build/js/app.bundle.js:21105:80)
at http://localhost:8100/build/js/app.bundle.js:21108:77
at Array.forEach (native)
10 881006 error ERROR CONTEXT:
What is a problem?
Thanks in advance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.