Can I change default configuration? about ionic2-calendar

[twinssbc]

@marticrespi There's startingDayMonth option for month view

[marticrespi]

Hi @twinssbc

I had modified forcing my locale to es-ES with following code in app.module.ts

import { LOCALE_ID } from '@angular/core';

providers: [
// other providers
  { provide: LOCALE_ID, useValue: "es-ES" }, //replace "es-ES" with your locale
]

I have removed this code and with your new version works without above code.

I have a little problem with header style

https://i.imgbox.com/3aPQqfJE.png

in spanish is translated with final dot), only I have to overwrite ,small class with a minor % value

	small {
	   font-size: 69%;
	}

https://i.imgbox.com/Y7Gxu00G.png

I tried to change formatDayHeader specifying different default value with your previous version, and didn't work. With your new version it does not work either.

I have set this code in .html file

<calendar
[showEventDetail]="false"
[calendarMode]="calendar.mode"
[formatDayHeader]="calendar.formatDayHeader"
[startingDayMonth] = "calendar.startingDayMonth"
[currentDate]="calendar.currentDate"
[markDisabled]="markDisabled"
(onCurrectDateChanged)="onCurrentDateChanged($event)"
(onRangeChanged)="reloadSource(startTime, endTime)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
</calendar>

And this one in .ts file

calendar = {
    mode: 'month',
    currentDate: new Date(),
    startingDayMonth : 1,
    formatDayHeader : 'EEEEE'
};

I wanted to set only a capital letter as header, and after research how can do it, I found this info:

E, EE, or EEE > Tue
EEEE > Tuesday
EEEEE > T
EEEEEE > Tu

Where I hope that calendar shows me only a capital letter for each day. Should it work with overwritted value, shouldn't it?

It's show me all day headers as 'EEEEE' as plain text!

Many thanks for all your hard work!

[twinssbc]

@RS-Shekhawat You can take a look at the Today button logic in the demo page.
That button is used to set the calendar to today. Basically you just need to set the calendar to a date in next or previous month.

[marticrespi]

startingDayWeek
Control week view starting from which day.
Default value: 0

I have this in my ts file

calendar = {
	mode: 'month',
	currentDate: new Date(),
	startingDayWeek : 1
};

And in my html file

<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
[startingDayWeek] = "calendar.startingDayWeek"
[currentDate]="calendar.currentDate"
(onCurrectDateChanged)="onCurrentDateChanged($event)"
(onRangeChanged)="reloadSource(startTime, endTime)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
</calendar>

If the default value is 0 (sunday) with 1 should show me the calendar starting in monday, isnt it?

[twinssbc]

@marticrespi

1. The DatePipe in Angular2 uses Intl to achieve i18n. The title should already be translated to your local language. But I also found that Intl doesn't do the good job for some language. Did you meet any difficulty to format the title?
   2&4 I just added markDisabled option in the latest 0.0.16 version. Feel free to have a try.
2. You can put [startingDayWeek]="1" in the html file.

[marticrespi]

Hi @twinssbc

I have tried again and anything has changed.

<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
		[startingDayWeek] = 1
[currentDate]="calendar.currentDate"
(onCurrectDateChanged)="onCurrentDateChanged($event)"
(onRangeChanged)="reloadSource(startTime, endTime)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
</calendar>

My calendar still starts on sunday. The [startingDayWeek] = 1 doesn't work as number neither as string, always starts with sunday.

For translation, your variable defined as viewTitle in your example is well translated, but days of week is still in english. I use Int 1.2.5 as you suggested and my language is spanish.

Here is my calendar

https://i.imgbox.com/2vUxizjW.png

I just updated your library, I have tried your markDisabled option and works well, only I was hope the disabled days were not selectables.

Thanks for your great job!

Kind Regards!

[marticrespi]

Hi @twinssbc

Reviewing your sourcode in src/calendar.ts file:

<div [ngSwitch]="calendarMode">
<monthview *ngSwitchCase="'month'"
	[formatDay]="formatDay"
	[formatDayHeader]="formatDayHeader"
	[formatMonthTitle]="formatMonthTitle"
	[startingDayMonth]="startingDayMonth"
	[showEventDetail]="showEventDetail"
	[noEventsLabel]="noEventsLabel"
	[eventSource]="eventSource"
	[markDisabled]="markDisabled"
	(onRangeChanged)="rangeChanged($event)"
	(onEventSelected)="eventSelected($event)"
	(onTimeSelected)="timeSelected($event)"
	(onTitleChanged)="titleChanged($event)">
</monthview>
<weekview *ngSwitchCase="'week'"
	[formatWeekTitle]="formatWeekTitle"
	[formatWeekViewDayHeader]="formatWeekViewDayHeader"
	[formatHourColumn]="formatHourColumn"
	[startingDayWeek]="startingDayWeek"
	[allDayLabel]="allDayLabel"
	[hourParts]="hourParts"
	[eventSource]="eventSource"
	[markDisabled]="markDisabled"
	(onRangeChanged)="rangeChanged($event)"
	(onEventSelected)="eventSelected($event)"
	(onTimeSelected)="timeSelected($event)"
	(onTitleChanged)="titleChanged($event)">
</weekview>
<dayview *ngSwitchCase="'day'"
	[formatDayTitle]="formatDayTitle"
	[formatHourColumn]="formatHourColumn"
	[allDayLabel]="allDayLabel"
	[hourParts]="hourParts"
	[eventSource]="eventSource"
	[markDisabled]="markDisabled"
	(onRangeChanged)="rangeChanged($event)"
	(onEventSelected)="eventSelected($event)"
	(onTimeSelected)="timeSelected($event)"
	(onTitleChanged)="titleChanged($event)">
</dayview>
</div>

In month case template, I think you forget to include [startingDayWeek]="startingDayWeek" as weekview, because if I try it with CalendarMode='week' it starts on monday, in fact if I use month calendar mode, always set as sunday because is the default value.

Kind regards!

[marticrespi]

You're right @twinssbc , but we was always talking about "startingDayWeek" I thought they are not the same option. Works well with startingDayMonth option!

Another thing than I have seen:

If I don't set an eventSource (default = null, removing [eventSource]="eventSource" in html file) or I set showEventDetail=false, should not it exclude ion-list div (ion-list events) when is rendering the calendar? Is it include anyway?

https://i.imgbox.com/PWWaFtrF.png

[twinssbc]

If you set [showEventDetail]="false", the event detail list won't display.

[marticrespi]

Yes @twinssbc, but the div returned not fit properly, its remembering the size of events list.

With [showEventDetail]="false" It shows this:

https://i.imgbox.com/cVavrBTN.png

For me the suitable design should be displayed like this:

https://i.imgbox.com/0HXTYNVy.png

[twinssbc]

@marticrespi
Yes, I set the view container to 100% height to support the scrolling list in the week and day view. I added some css class to the view container in the version 0.0.17. So you can change the height of monthview-container class.
In this version, I also make the disabled date not selected.
Feel free to have a try.

[marticrespi]

Hi @twinssbc

Both changes works like a charm! You are doing a great job!

I only use monthview because I need to show a selectable checkbox list. If your EventSource could include a boolean property like isAvailable and EventList displays a checkbox to be selectable I could use your monthview with Events, meantime I have to use the monthview without events but I would like to use your fully library.

Perhaps you can consider it as enhancement for the future.

By the way, could you investigate something about "Intl" to can fully translate the calendar in all languages? It's very strange ..

Many thanks for your work!

Kind regards,
Marti.

[marticrespi]

Hi @twinssbc

If I am 22nd december and slide to january, it goes to 22nd directly, but 22nd january for me is disabled (I have disabled sundays). I think that when you slides you are doing AddMonth (1) directly, but is possible to check disabled property before addMonth and goes, for example, to next or previous avaiable day?

[twinssbc]

@marticrespi I added logic to not select disabled date when moving to previous/next month. Going to next/previous available day is a too specific requirement. Also considering some user requires disable all past days until today, there will be no available days. So I just simply not select the disabled date.
Feel free to have a try.

[marticrespi]

@twinssbc

Works perfectly! I said previous or next available day to say something, your logic applied is perfect, not change selected date if the day in next/previous month is disabled.

[marticrespi]

Hi @twinssbc

Could you investigate about Intl translation? I have viewTitle well translated in spanish but day names are in english..

Many thanks!

[twinssbc]

@marticrespi I fixed the day headers in version 0.1.2. Could you have a try?

[twinssbc]

@marticrespi Is "EEEEE" supported by the Angular2 DatePipe? From below page, I can see it only supports "EEE" and "EEEE"
https://angular.cn/docs/ts/latest/api/common/index/DatePipe-class.html

To only display the first capital letter, you probably need to modify the source code to update the expression like below

    <th *ngFor="let dayHeader of view.dayHeaders">
        <small>{{dayHeader.toUpperCase().substring(0,1)}}</small>
    </th>

[marticrespi]

Yes @twinssbc you're right, but in angular.io domain shows that with E only should show the first letter

https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

But don't worry, I will decrease the small % class and I will use your default format! I dont want modify your source code, because I will have to change on every update!

Many thanks!

[RS-Shekhawat]

@twinssbc Can I add "next", "previous" buttons in the calendar directive?

Thanks!

[twinssbc]

@RS-Shekhawat, where do you want to add next, previous button? If you want to add them in the header bar, Ionic framework already provides that capability.
If you want to embed them into the calendar, you may need some customization of the view or the code.
But it already provided the default swipe interaction, not sure if extra navigation button is a bit duplicate.

[RS-Shekhawat]

@twinssbc, Yes, I want to add this with calendar month title. I want to convert swipe interaction with next previous button so user can see next month or previous month through these buttons so in that calendar could I customize its config options like "calendar = {
mode: 'month',
currentDate: new Date()
};"

is any options there for next, previous button like?

"header: {
left: '',
center: 'prev, title, next',
right: ''
},"

Or where we need to change the code could you help me for this.

Thanks!

[twinssbc]

@RS-Shekhawat
The header is the Ionic header bar or the one in the calendar itself.
If it's the Ionic header bar, then it's easy. You can add the button and change the calendar.currentDate in the click callback. The calendar will navigate to the date you set.
If you want to add a header in the calendar, then source code change is required.

[RS-Shekhawat]

Thanks, @twinssbc It is very helpful suggestion for me its working nice.

Thank you so much !!

[chanphillip]

Hi
I couldn't make the i18n work. I want to force it to be in English.
I've added { provide: LOCALE_ID, useValue: "en-US" } to app.module.ts providers, but it is still showing the week days in my local language.

[benoitrongeard]

Same for me in France :
{ provide: LOCALE_ID, useValue: "fr-FR" } Thx guys 👍

[twinssbc]

@dualshote Do you have problem to display the calendar in French or not?

[EdgarBaeza13]

How can i translate the values of the calendar to spanish? I've already tried the same that all of you say in the comennts but it doesn´t work

[twinssbc]

@EdgarBaeza13 Could you provide your code?

[SergiCanal]

Hi @twinssbc thanks for that amazing component.
Do you know if there is any way to translate the calendar to Catalan?

Thank you very much!

[twinssbc]

@SergiCanal I believe so, you could refer to Localization section in README for more details. If you have further question, please create a separate issue.

[JaumeBoschAnglada]

Hi @twinssbc thanks for that amazing component. Do you know if there is any way to translate the calendar to Catalan?

Thank you very much!

Hi Sergi, did you success on translate the calendar to Catalan?