gbrits / ionic-calendar Goto Github PK

Hey man, thanks for your great component, but maybe you should change the npm install ionic3-calendar-en --save in the readme file because this reference doesn't have multiple language support

Thanks

Hi,
The plugin is not supported by latest Ionic version/Angular version .

Please add support for this.

The plugin works when i run the app in dev mode, but when i try to run it in prod mode, i get the following error:

Error: ./src/pages/events/list.component.ngfactory.js
Module not found: Error: Can't resolve '../../../node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory' in '/var/www/applicationLions/src/pages/events'
resolve '../../../node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory' in '/var/www/applicationLions/src/pages/events'
using description file: /var/www/applicationLions/package.json (relative path: ./src/pages/events)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /var/www/applicationLions/package.json (relative path: ./src/pages/events)
using description file: /var/www/applicationLions/node_modules/ionic3-calendar-en/package.json (relative path: ./src/calendar/calendar.ngfactory)
no extension
Field 'browser' doesn't contain a valid alias configuration
/var/www/applicationLions/node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/var/www/applicationLions/node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/var/www/applicationLions/node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/var/www/applicationLions/node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory.json doesn't exist
as directory
/var/www/applicationLions/node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory doesn't exist
[/var/www/applicationLions/node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory]
[/var/www/applicationLions/node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory.ts]
[/var/www/applicationLions/node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory.js]
[/var/www/applicationLions/node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory.json]
[/var/www/applicationLions/node_modules/ionic3-calendar-en/src/calendar/calendar.ngfactory]
@ ./src/pages/events/list.component.ngfactory.js 35:0-96
@ ./src/app/app.module.ngfactory.js
@ ./src/app/main.ts
at new BuildError (/var/www/applicationLions/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at callback (/var/www/applicationLions/node_modules/@ionic/app-scripts/dist/webpack.js:121:28)
at emitRecords.err (/var/www/applicationLions/node_modules/webpack/lib/Compiler.js:269:13)
at Compiler.emitRecords (/var/www/applicationLions/node_modules/webpack/lib/Compiler.js:375:38)
at emitAssets.err (/var/www/applicationLions/node_modules/webpack/lib/Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (/var/www/applicationLions/node_modules/webpack/lib/Compiler.js:368:12)
at next (/var/www/applicationLions/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/var/www/applicationLions/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/var/www/applicationLions/node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (/var/www/applicationLions/node_modules/webpack/lib/Compiler.js:365:9)

Error while getting event of future or past date after clicking current month's date.
First i click on any date of current month and then when i click on any date of future or past got error of "ERROR TypeError: Cannot set property 'isSelect' of undefined"
at Calendar.daySelect (calendar.ts:256)
at Object.eval [as handleEvent] (Calendar.html:20)

hi
how to use remote event source ?

I recently installed this package, when i try to serve, i receive:

Cannot find module 'moment'

import * as moment from moment

How can i fix this?

hello how can i get Event Data on click?
i want to add note , location , title , to the event and fetch them on each date with event click ?

i only get this object on date select
date:25
hasEvent:true
isSelect:true
isThisMonth:true
isToday:false
month:0
year:2018

even i added them to my object
this.currentEvents = [
{
year: 2018,
month: 0,
date: 25,
note:'aaasss',
title:'sweq',
location:'qqqqwww'
},
{
year: 2018,
month: 0,
date: 26,
note:'qqzzccc',
title:'jjjk',
location:'oooo'
}
];

How I can install this calendar on Ionic 4?

Thanks!

Dear,

I would love to know how can I limit the dates that users can choose. For example, users can only choose a date that is no greater than today.

Thank you.

Thank you for the great package.
I didn't quite get how to return a day that I click, by the method you provided.

<ion-calendar #calendar [events]="currentEvents" (onDaySelect)="onDaySelect($event)" (onMonthSelect)="onMonthSelect($event)"></ion-calendar>
how can I return it by onDaySelect function.
Thank you very much again.

Hey, I want the calendar to show Monday as first day (and not Sunday) but I just can't make it work. How could I accomplish that?

EDIT: Solved it by changing src/calendar.js

this.weekHead=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

In this loop, change 0 to 1 so it starts on Monday
for (var i = 0; i < firstDay; i++) {

Hi,
it's possible add a paramateres (for example options) to customize the colors, the language and all others options?

I need to add italian language.

Thanks in advance.

When i open the calendar and select a day at the first time in another month it shown the error in the screenshot , any help ?

Hi,
i just implement it but i don't understand how to highlight the current date, also cant find in doc, can you please tell me how to i highlight the current today date

I'm trying to change the template in calendar.html, but i don't see my changes. There's one special that i have to do?
the button > is not responsible and i need to do changes

core.js:1449 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'ion-calendar' is not a known element:

1. If 'ion-calendar' is an Angular component, then verify that it is part of this module.
2. If 'ion-calendar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]<ion-calendar #calendar>

My ionic info

Ionic:

ionic (Ionic CLI) : 4.3.1 (D:\ProgramData\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.11

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : not available
Cordova Plugins : not available

System:

NodeJS : v8.11.3 (D:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 10

How can I disable previous calendar dates (disable past calendar dates)

how to translate, create oficial translate?

Hi, I'm very new to coding itself.

I have successfully installed this ionic2-calendar into my ionic folder. It is running smoothly. Theres one more step I'd like to move on to.

Where for events it says that this is the right format:

this.currentEvents = [
{
year: 2017,
month: 11,
date: 25
},
{
year: 2017,
month: 11,
date: 26
}
];

But it is not showing on my calendar and as for theses lines of code:

<ion-calendar #calendar [events]="currentEvents" (onDaySelect)="onDaySelect($event)" (onMonthSelect)="onMonthSelect($event)">
Error: _co.onDaySelect() is not a function.

<ion-calendar #calendar (onDaySelect)="onDaySelect($event)">

it gives out error.

Could you possibly upload more detailed information about the implantation?

This was the array described in documentation.
this.currentEvents = [
{
year: 2019,
month: 11,
date: 25,
},
{
year: 2019,
month: 11,
date: 27
}
];

I want to add title in this currentEvents array. So that the calendar shows the green dots with that title of the events.

I am getting this error I am using latest version

Error: Template parse errors:
Can't bind to 'color' since it isn't a known property of 'ion-calendar-week'.

1. If 'ion-calendar-week' is an Angular component and it has 'color' input, then verify that it is part of this module.

2. If 'ion-calendar-week' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

   <ion-calendar-week
   [ERROR ->][color]="_d.color"
   [weekArray]="_d.weekdays"
   [weekStart]="_d.weekStart">
   "): ng:///AppModule/CalendarModal.html@24:8
   Can't bind to 'weekArray' since it isn't a known property of 'ion-calendar-week'.

4. If 'ion-calendar-week' is an Angular component and it has 'weekArray' input, then verify that it is part of this module.

5. If 'ion-calendar-week' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   <ion-calendar-week
   [color]="_d.color"
   [ERROR ->][weekArray]="_d.weekdays"
   [weekStart]="_d.weekStart">
   
   "): ng:///AppModule/CalendarModal.html@25:8
   Can't bind to 'weekStart' since it isn't a known property of 'ion-calendar-week'.

7. If 'ion-calendar-week' is an Angular component and it has 'weekStart' input, then verify that it is part of this module.

8. If 'ion-calendar-week' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

9. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   [color]="_d.color"
   [weekArray]="_d.weekdays"
   [ERROR ->][weekStart]="_d.weekStart">
   

"): ng:///AppModule/CalendarModal.html@26:8
'ion-calendar-week' is not a known element:

1. If 'ion-calendar-week' is an Angular component, then verify that it is part of this module.

2. If 'ion-calendar-week' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   

   [ERROR ->]<ion-calendar-week
   [color]="_d.color"
   [weekArray]="_d.weekdays"
   "): ng:///AppModule/CalendarModal.html@23:6
   Can't bind to 'month' since it isn't a known property of 'ion-calendar-month'.

3. If 'ion-calendar-month' is an Angular component and it has 'month' input, then verify that it is part of this module.

4. If 'ion-calendar-month' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("text-center month-title">{{_monthFormat(month.original.date)}}
   <ion-calendar-month [ERROR ->][month]="month"
   [pickMode]="_d.pickMode"
   "): ng:///AppModule/CalendarModal.html@38:32
   Can't bind to 'pickMode' since it isn't a known property of 'ion-calendar-month'.

6. If 'ion-calendar-month' is an Angular component and it has 'pickMode' input, then verify that it is part of this module.

7. If 'ion-calendar-month' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

8. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("iginal.date)}}
   <ion-calendar-month [month]="month"
   [ERROR ->][pickMode]="_d.pickMode"
   [isSaveHistory]="_d.isSaveHistory"
   "): ng:///AppModule/CalendarModal.html@39:32
   Can't bind to 'isSaveHistory' since it isn't a known property of 'ion-calendar-month'.

9. If 'ion-calendar-month' is an Angular component and it has 'isSaveHistory' input, then verify that it is part of this module.

10. If 'ion-calendar-month' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

11. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("h]="month"
    [pickMode]="_d.pickMode"
    [ERROR ->][isSaveHistory]="_d.isSaveHistory"
    [id]="_d.id"
    "): ng:///AppModule/CalendarModal.html@40:32
    Can't bind to 'color' since it isn't a known property of 'ion-calendar-month'.

12. If 'ion-calendar-month' is an Angular component and it has 'color' input, then verify that it is part of this module.

13. If 'ion-calendar-month' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

14. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ry]="_d.isSaveHistory"
    [id]="_d.id"
    [ERROR ->][color]="_d.color"
    (onChange)="onChange($event)"
    "): ng:///AppModule/CalendarModal.html@42:32
    'ion-calendar-month' is not a known element:

15. If 'ion-calendar-month' is an Angular component, then verify that it is part of this module.

16. If 'ion-calendar-month' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    {{_monthFormat(month.original.date)}}

    
    [ERROR ->]<ion-calendar-month [month]="month"
    [pickMode]="_d.pickMode"
    "): ng:///AppModule/CalendarModal.html@38:12
    at syntaxError (file:///android_asset/www/build/vendor.js:118742:34)
    at TemplateParser.parse (file:///android_asset/www/build/vendor.js:142588:19)
    at JitCompiler._parseTemplate (file:///android_asset/www/build/vendor.js:151975:37)
    at JitCompiler._compileTemplate (file:///android_asset/www/build/vendor.js:151950:23)
    at file:///android_asset/www/build/vendor.js:151852:62
    at Set.forEach ()
    at JitCompiler._compileComponents (file:///android_asset/www/build/vendor.js:151852:19)
    at file:///android_asset/www/build/vendor.js:151722:19
    at Object.then (file:///android_asset/www/build/vendor.js:118731:77)
    at JitCompiler._compileModuleAndComponents (file:///android_asset/www/build/vendor.js:151721:26)

PROBLEMS
OUTPUT
DEBUG CONSOLE
TERMINAL
JAVA_HOME=C:\Program Files\Java\jdk

i am trying to use this plugin for showing calendar in my app. it all working fine but up on date selection, current date is still selected which gives a wrong impression to the user.

was anybody able to fix this?