Fullcalendar: Jalaali date system support

[arshaw]

Originally reported on Google Code with ID 1546

i have to build a jalali calender and every thing was ok expect one problem
month days are different from gorgeous

for example second month in gorgeous(feb) have 28 days but second month in jalali has
31 days!

the days count are look like this 
31-31-31-31-31-31-30-30-30-30-30-29 (30 every 4 years)

Thanks

Reported by unireseller on 2012-09-23 11:28:21

Imported with 9 stars.

[arshaw]

Reported by adamrshaw on 2013-08-19 01:55:10

• Status changed: Accepted

[arshaw]

Issue 1236 has been merged into this issue.

Reported by adamrshaw on 2013-08-19 01:55:26

[arshaw]

Reported by adamrshaw on 2013-08-19 02:26:28

• Labels added: Type-Feature
• Labels removed: Type-Enhancement

[arshaw]

Issue 1874 has been merged into this issue.

Reported by adamrshaw on 2013-08-19 02:40:52

[arshaw]

Issue 1888 has been merged into this issue.

Reported by adamrshaw on 2013-08-19 02:48:24

[arshaw]

Issue 1888 has been merged into this issue.

Reported by adamrshaw on 2013-08-19 02:48:24

[arshaw]

Issue 2199 has been merged into this issue.

Reported by adamrshaw on 2013-08-25 07:26:43

[arshaw]

this is jalali supported caleander

Reported by irani.salman on 2014-09-02 04:20:11

---

• _Attachment: persian fullcalendar.rar_

[arshaw]

Hi,
I added Jalali calendar with few changes in main code for fullcalendar version 2.1.1.
this is my github fork address:
https://github.com/ehsandanesh/fullcalendar
For persian jalali calendar to be enabled you have to just use "lang:'persianJalali'"
in your fullcalendar object definition. It is added by me and it is not in mainline
of fullcalendar development yet. and it has no interfere with any other fullcalendar
configuration object.
Becareful of using "lang:fa" because it does not convert fullcalendar to Jalali format,
it just translates default fullcalendar to persian language as it does before.
I used "viewRender" and "eventAfterAllRender" fullcalendar object elements for this
conversion so PLEASE BE CAREFUL FOR OVERRIDING THEM.
I even used this pwt-datpicker jquery library for my date conversions so it is my fork
new dependancy so add it before using this fork.

Reported by ehsan.danesh on 2014-10-17 12:19:36

[arshaw]

Hi ehsan
where is moment.js and jquery.js in project?
i import this files from main project but dont show calendar if i use lang:'persianJalali'.

Reported by irani.salman on 2014-10-29 05:06:57

[arshaw]

Hi, irani
I added those libs for project, but attention that the main project does not have it
too because you have to add it by yourself from their main project.

Reported by ehsan.danesh on 2014-10-30 05:56:56

[arshaw]

Hi ehsan
thank's for attention.
when  i use lang:'persianJalali' recive this error and dont run correctly
ReferenceError: persianDate is not defined

Reported by irani.salman on 2014-10-30 06:45:22

[arshaw]

Hi,
As I said I even used this "pwt-datpicker" jquery library for my date conversions so
it is my fork new dependancy so add it before using this fork:
fullcalendar/pwt-date.js

Reported by ehsan.danesh on 2014-10-30 07:17:44

[arshaw]

sorry for typo error file address is :
fullcalendar/src/pwt-date.js

Reported by ehsan.danesh on 2014-10-30 07:20:38

[ehsandanesh]

Hi everybody I added Jalaali calendar to version 2.6.0 and solved previous issues in this update you can find it from here:
https://github.com/ehsandanesh/fullcalendar

[Natico]

Hi , in last week I changed & added Jalaali calendar to FullCalendar version 3.0.1 .
you can find it from here:
https://github.com/Natico/fullcalendar-Jalaali

[espen]

Can this be made into a pull request @Natico ?

[mamsoudi]

@Natico Naser Jan Can you please send a Pull request to make your works available for all the users who want Persian Calendar Support maybe? 👍
Thanks in Advance!

[arshaw]

It seems like this would be difficult to make into a pull request without littering "jalaali" all throughout the codebase. I'd like to think of the Jalaali calendar system as just one system of many, similar to a timezone or a locale. As such, momentjs should handle this rather than special-cases in fullcalendar.

momentjs is discussing this concept here: https://github.com/moment/moment/issues/1454
(I'd encourage you to upvote that ticket)

I imagine the API will turn out something like this:

var m = moment(str, { calendar: 'jalaali' });
m.calendar(); // getter, "jalaali"
m.calendar('hijiri'); // setter

The important concept is that the moment will store the state about what calendar system it is using. The owner of the moment object won't need to store that state separately themselves.

If things progress in that direction, then the same .day(), .week(), .month(), .year() methods could be used. And there would be easily pluggable formatting/parsing hooks. And if that were the case, the moment-jalaali extension could be much simpler that it is, free of all that duplicate core momentjs code.

And furthermore, FullCalendar wouldn't need to do anything special. It might have a setting like calendar: 'jalaali', which would initialize all internally-created moments with that calendar system setting (would be put somewhere near here). There wouldn't need to be an entire fork of fullcalendar, which is essentially what fullcalendar-jalaali is.

TL;DR: It's probably best to wait until non-Gregorian calendar systems get built into MomentJS before doing any more work on this front.

CC @Natico @behrang. and nice work on hacking things together and getting it to work.

[behrang]

Couldn't agree more. Wrote a comment on moment/moment#1454.

[davodaslanifakor]

@ehsandanesh
Hi freind i want you lock at this library
https://github.com/CroudSupport/vue-fullcalendar

and told me are possible Chang this to jalali calendar
and Guide me...

[aliir74]

Hi.
There is a bug in jalaali support. The week numbers are calculate from gorgeous calendar. but in jalaali calendar first week of year is first week of _farvardin_ month (first week of spring).

[ali7091]

hi
when i use this with scheduler.js it throws an error
==>error : Cannot read property 'Mixin' of undefined

[blackmambano5]

Same here

[bahmansh]

I saw version 4 alpha, and it support jalali calendar (locale fa).
It is so good.
The main issue is that calendar view (days of month) are not based on persian calendar.

in this view first day should be

[bahmansh]

Please answer my question. ☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝

@arshaw @acerix

[acerix]

What is your question? The feature is not complete yet, I believe it will work as you described when it is.

[bahmansh]

Thanks. I'm waiting for it.

[zareiramin]

Waiting jalali calendar fully supported, any progress?

[maitree-serpentcs]

I want FullCalendar v3.0.1 with jalali calendar .Can any one help me ?

[ahangarha]

We need a contribution to the project. I unfortunately don't know js in the level I can help.

[bahmansh]

When will resolve this issue?
I need it and I think more people need it too.

Thanks for your support.

@arshaw
@acerix

[rfnbnkr]

hello. i test 4.0.2 version with fa locale. it is now jalali but month view doesn't correct.
in this comment behmanesh explain that:
https://github.com/fullcalendar/fullcalendar/issues/1813#issuecomment-446080503

[arshaw]

rendering the persian calendar is not yet implemented, the the codebase is set up to handle this change in the future. if someone wants to take a stab at it, here is where to start:
https://github.com/fullcalendar/fullcalendar/blob/master/src/core/datelib/calendar-system.ts#L23

instead of GregorianCalendarSystem, make a PersianCalendarSystem (is "Persian" the best name?)

it would be great to make it as a plugin, but i'd need to expose a hook for that. best to implement it internally to start.

[mohas]

I will take a shot at it, can be called either PersianCalendar (as in .Net library implementation) or JalaliCalendar (like moment-jalali moment plugin)

[bahmansh]

I think we can handle it by momentjs and jalali-moment. But I don't know exactly how I should implement your codes.

PersianCalendarSystem is well.

@arshaw

[timsar2]

for version 3 in angular:
import * as moment from 'jalali-moment';

options = { 
locale : 'fa',
   now: function () {
        const now = moment(new Date());
        const today = moment(now)
          .locale('fa')
          .format('YYYY/MM/D');
          return today;
      }
 }

it'll set today as persian date but number of month showing in calendar is not equal gregorian date

[erfanatp]

Also, I have the same issue. Month view should support Jalali/Persian period. August 2019 with locale fa shows 2 different months in Jalali like as Shahrivar 1398 - Mehr 1398.

[sabersaberi2]

can anyone say when this problem will be resolve?

[ahangarha]

Nobody can give any time. Some of us (who really need this feature) should get our hand dirty and solve this issue.

[ttvd94]

rendering the persian calendar is not yet implemented, the the codebase is set up to handle this change in the future. if someone wants to take a stab at it, here is where to start:
https://github.com/fullcalendar/fullcalendar/blob/master/src/core/datelib/calendar-system.ts#L23

instead of GregorianCalendarSystem, make a PersianCalendarSystem (is "Persian" the best name?)

it would be great to make it as a plugin, but i'd need to expose a hook for that. best to implement it internally to start.

Hey @arshaw , the link you provided is dead

[benamm]

the world is over!!!

[Sinakh121]

Hey @arshaw , the link you provided is dead

here is the correct link i guess:
https://github.com/fullcalendar/fullcalendar/blob/master/packages/core/src/datelib/calendar-system.ts#L23

[sabersaberi2]

is there any js coder to resolve that? i can pay for that.
آقایون داداشا یک کدنویس جاوااسکریپت بیاد حل کنه خب این مساله رو...کل ملت منتظرن. هزینه رو من قبول میکنم.

[timsar2]

is there any js coder to resolve that? i can pay for that.
آقایون داداشا یک کدنویس جاوااسکریپت بیاد حل کنه خب این مساله رو...کل ملت منتظرن. هزینه رو من قبول میکنم.

I think It's working on version 4. I can help you...

import faLocal from '@fullcalendar/core/locales/fa';

options = { locales:[faLocale], locale:'fa'}

[arshaw]

Some news on this issue: the built-in Intl.DateTime API is now able to handle Jalaali calendar-system conversion natively, though it is not fully supported in IE (only Edge). See this demo:

https://codepen.io/arshaw/pen/xxZPMpj?editors=0010

Since no third-party lib is required, and this same technique can be used for any of the calendar-systems listed in DateTimeFormat's calendar option, this is something I can imagine baking-in to FullCalendar's codebase.

I can't give any estimates, but please be assured this is on my radar.

[erfanatp]

@arshaw The problem isn't that. The main issue is that calendar view (days of the month) are not based on Persian calendar. It means in one view of calendar table, we see start date of a month is in the middle of the view (table). Assume this issue in Gregorian:

[arshaw]

@erfanatp, I might not have explained very well. What I meant to say is that the Intl.DateTimeFormat API can be leveraged to compute Persian-calendar dates. It will solve the exact problem you point out. It goes beyond simply formatting the dates to a different language. The demo I posted shows how we can make that conversion happen.

[bahmansh]

What about jalali calendar?
I need it yet, I need to show just one month in month view, not two months.
I think it's easier for you to do this rather than us.
You are familiar with this codes structure and can do it more faster than us.

I will thankful, If you do this in soon.

[rahimzade]

hi
I resolved this problem by using the "visible range".
I set initialView to 'dayGrid' and convert start and end of the current month of Jalali calendar to gregorian(milady) and set start and end date in the visible range such as below code :
initialView: 'dayGrid', visibleRange: { start: moment.from(moment(new Date()).locale('fa').format('YYYY/MM/01'), 'fa', 'YYYY/MM/DD').format('YYYY-MM-DD'), end: moment.from(moment(new Date()).locale('fa').format( 'YYYY/' + moment(new Date()).locale('fa').add(1, 'month').format('MM') + '/01'), 'fa', 'YYYY/MM/DD').format('YYYY-MM-DD') },
now it shows the calendar by the first day of Jalali month.

[bluemmb]

@rahimzade There is syntax errors in the shared code + Can you elaborate more on what you are doing?

It would be good if you could create a gist from your source code. thanks

[rahimzade]

@bluemmb hi
you can see my code in this gist. it works but has the error in the same Jalali month when day in the month is '31'.

[MehranMazhar]

@bluemmb hi
you can see my code in this gist. it works but has the error in the same Jalali month when day in the month is '31'.

Visible range only works on dayGrid and weekGrid, we need a way to use it in the monthlyGrid view .

[z98abdi]

has anyone worked and made a solution for version 5 or earlier?something like @ehsandanesh solution

[Sinakh121]

for all of you who are just looking for jalaali date system in react-big-calendar, i've created a fork which works only for persian system & does not support other calendar systems inculding gregorian.
it can handle your work if you are not intending to use anything other than jalaali calendar.

Warning: this is just a temporary solution that may contain minor bugs. i've left working on this project anymore.
https://www.npmjs.com/package/react-big-calendar-only-farsi
https://github.com/Sinakh121/react-big-calendar-only-farsi#readme

[rahimzade]

@bluemmb hi
you can see my code in this gist. it works but has the error in the same Jalali month when day in the month is '31'.

Visible range only works on dayGrid and weekGrid, we need a way to use it in the monthlyGrid view .

please set duration by 'week'. for example :
type: 'dayGrid', duration: { weeks: 6 }