Comments (32)
@marticrespi There's startingDayMonth option for month view
from ionic2-calendar.
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!
from ionic2-calendar.
@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.
from ionic2-calendar.
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?
from ionic2-calendar.
- 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. - You can put [startingDayWeek]="1" in the html file.
from ionic2-calendar.
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!
from ionic2-calendar.
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!
from ionic2-calendar.
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
from ionic2-calendar.
If you set [showEventDetail]="false", the event detail list won't display.
from ionic2-calendar.
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
from ionic2-calendar.
@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.
from ionic2-calendar.
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.
from ionic2-calendar.
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?
from ionic2-calendar.
@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.
from ionic2-calendar.
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.
from ionic2-calendar.
Hi @twinssbc
Could you investigate about Intl translation? I have viewTitle well translated in spanish but day names are in english..
Many thanks!
from ionic2-calendar.
@marticrespi I fixed the day headers in version 0.1.2. Could you have a try?
from ionic2-calendar.
@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>
from ionic2-calendar.
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!
from ionic2-calendar.
@twinssbc Can I add "next", "previous" buttons in the calendar directive?
Thanks!
from ionic2-calendar.
@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.
from ionic2-calendar.
@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!
from ionic2-calendar.
@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.
from ionic2-calendar.
Thanks, @twinssbc It is very helpful suggestion for me its working nice.
Thank you so much !!
from ionic2-calendar.
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.
from ionic2-calendar.
Same for me in France :
{ provide: LOCALE_ID, useValue: "fr-FR" }
Thx guys ๐
from ionic2-calendar.
@dualshote Do you have problem to display the calendar in French or not?
from ionic2-calendar.
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
from ionic2-calendar.
@EdgarBaeza13 Could you provide your code?
from ionic2-calendar.
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!
from ionic2-calendar.
@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.
from ionic2-calendar.
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?
from ionic2-calendar.
Related Issues (20)
- could you include the version 9.x of swipper in ionic2-calendar ? HOT 4
- Error: node_modules/ion2-calendar/dist/calendar.module.d.ts:8:60 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s). [ng] [ng] 8 static forRoot(defaultOptions?: CalendarModalOptions): ModuleWithProviders HOT 1
- Update to ionic 7 HOT 1
- How to change row height ? HOT 1
- Module '"swiper/types"' has no exported member 'SwiperOptions'. HOT 6
- ionic 7 angular 15 swiper 9 compatibility HOT 2
- [EDIT] MonthView on Android: swipe behavior when the screen is Swiped HOT 7
- Error while loading from a JSON response HOT 5
- Ionic 6 Angular 13 swiping problem HOT 2
- How to change the event background color? HOT 1
- Day view dynamic color change does it only for the first half an hour HOT 2
- Accessing Event Details in a child view HOT 1
- Angular 17 support HOT 3
- Ionic 7 week view header appears in the wrong place HOT 1
- Version 2.2.x error with multiple calendars in the same mode HOT 3
- swiper 11 support HOT 1
- EventSource not loading events and ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError on RangeChange when event source is set HOT 3
- [bug] Issue with View Update on Android Swipes
- [bug]month view failed (V2.4.0) HOT 10
- Unable to install the Ionic7-calendar in ionic 8 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic2-calendar.