Help with DATE/TIME Calendar Formatting

[Mark Arsenich]

I would like to know how to change the following problems

1st - Change time display format from 24hr/Military time to 12hr AM/PM time.
2nd - Change the first day of the week from Monday to Sunday
3rd - Currently E!A posts appointments created from itself to the Google Calendar, however it does sync both ways and any appointments created directly via Google.com's calendar interface or via my iPhone/iPad are not synced back to the E!A Calendar screen
     - This one way only syncing makes it possible for appointments to be doubled book. EXAMPLE: if an appointment is first made by the calendar app on an iDevice or through Google.com and then someone creates an appointment using E!A via our website at the same time.

Any help would be INCREDIBLE!

I want to have my customers use this asap but i need the first 2 issues resolved first. thank you!

[Mark Arsenich]

Any help???

Also how do we get it to display EST instead of GMT??? Not only is everything in military time, but everything is off by an hour...

So to recap:
- Change from GMT to EST so appointments aren't off by an hour (important if you ask me)
- Change the starting calendar date to SUNDAY instead of MONDAY (confusing for people making appointments)
- Change the display time from 24hr military time to 12hr AM/PM (again, not very user friendly)

Please help, I would like to use this, however unless these issues are addressed immediately I'll be forced to find another solution. (Regretfully as this looked to be the most promising)

[Alex Tselegidis]

Hello, I'm sorry for not answering you earlier.

Changing the date time format requires code modifications which I cannot perform at the time being. If you're willing to try it by yourself be carefull not to break the app functionality.

You can easily change the calendar week start day by modifying the javascript files for each page.

Whenever you add an event to your Google Calendar account you will have to trigger the sync process from Easy!Appointments in order to sync both systems.

[Craig Tucker]

Changing the Calendar Format
/assets/js/frontend_book.js
Line 48, First Day: 7, //Sunday

This post deals with changing the time from military to AM/PM:
https://groups.google.com/forum/#!searchin/easy-appointments/Format/easy-appointments/5RPTUMCttRQ/K2pyLiobAVsJ

This deals with changing booking hours from q15 to q60 or what ever works for you
https://groups.google.com/forum/#!topic/easy-appointments/BnN8sz_XZcY

[Tom Le]

Hi Craig,

I did what you said in the front-end and everything seems fine, but in the backend the calendar headers show Sun-Sat, but the actual day/hours for booking are Mon-Sun.  So if the working plan is mon-fri, the fri is gray out because it is saturady.  So basically the header shift over, but the actual hours are not,

any idea where to fix this?

Thanks

[Edio Ilha]

Hey there!

How did you change the backend calendar header. Mine shows mon-sun even if I change:

/assets/js/frontend_book.js
First Day: 7

Thx!

[Edio Ilha]

Owhhh yes!

I just figure it out, and thats truth, Friday is gray out!

I'm looking for a solution, if I find it I will post here back!!

Thx 

[Edio Ilha]

Hi there,

I believe, we need to work here:

 $.each(workingPlan, function(index, workingDay) {

    //debuging we see that the index is starting on monday

    console.log(index);

    console.log(workingDay);

    if (workingDay == null) {

    // Add a full day unavailable event.

        unavailablePeriod = {

            'title': EALang['not_working'],

            'start': GeneralFunctions.clone(currDateStart),

            'end': GeneralFunctions.clone(currDateEnd),

            'allDay': false,

            'color': '#BEBEBE',

            'editable': false,

            'className': 'fc-unavailable'

         };

         $calendar.fullCalendar('renderEvent', unavailablePeriod, true);

         currDateStart.addDays(1);

         currDateEnd.addDays(1);

         return; // Go to the next loop.

     }

BTW reading fullcalendar documentation, I figure out that firstDay values varies from 0(Sunday - Default) to 6(Saturday).

http://fullcalendar.io/docs/display/firstDay/

thx

[Tom Le]

Hi Edio

Did you find the solution?

Thanks

[Edio Ilha]

Hi, 

Sorry, not yet!!

I'm looking for it, but I could not find if it is a buggy related to fullcalendar or easyappointments code!!

We use fullcalendar 1.6.1 and its latest version is 2.3.0, so

;---)

[Tom Le]

So this is what I found out so far.  If I go into user_settings table and change the working_plan like

{Sunday:null,"Monday":.....

then it works, but if I added a new user, the working plan is auto added at Monday to Sunday,  So I think that is where things are.

so I am looking at the working_plan.js, backend_users_providers.js, and backend_user.js, but
I have not made any break through yet. 

[Tom Le]

here is the section of the code when save working plan in backend_user_provider.js

    /**
     * Event: Save Provider Button "Click"
     */
    $('#save-provider').click(function() {
        var provider = {
            'first_name': $('#provider-first-name').val(),
            'last_name': $('#provider-last-name').val(),
            'email': $('#provider-email').val(),
            'mobile_number': $('#provider-mobile-number').val(),
            'phn_no': $('#provider-phn_no').val(),
            'address': $('#provider-address').val(),
            'city': $('#provider-city').val(),
            'state': $('#provider-state').val(),
            'zip_code': $('#provider-zip-code').val(),
            'notes': $('#provider-notes').val(),
            'settings': {
                'username': $('#provider-username').val(), 

****************
This is what I am try to find out what the wp.get retrun
                'working_plan': JSON.stringify(BackendUsers.wp.get()),

*******************


                'notifications': $('#provider-notifications').hasClass('active')
            }
        };

Help me out here, Edio  Thans

[Edio Ilha]

Thats cool.

Maybe the problem resides on it.

Let me do some tests here!!

;)

[Edio Ilha]

Thats right!!

This is just a feedback not a solution yet:

The database have {"monday":{"start":"09:00","end":"18:00","breaks":[]},"tuesday":{"start":"09:00","end":"18:00","breaks":[]},"wednesday":{"start":"09:00","end":"18:00","breaks":[{"start":"11:20","end":"11:30"},{"start":"14:30","end":"15:00"}]},"thursday":{"start":"09:00","end":"18:00","breaks":[{"start":"11:20","end":"11:30"},{"start":"14:30","end":"15:00"}]},"friday":{"start":"09:00","end":"18:00","breaks":[{"start":"11:20","end":"11:30"},{"start":"14:30","end":"15:00"}]},"saturday":null,"sunday":null}

So doing this:

{"sunday":null,"monday":{"start":"09:00","end":"18:00","breaks":[]},"tuesday":{"start":"09:00","end":"18:00","breaks":[]},"wednesday":{"start":"09:00","end":"18:00","breaks":[{"start":"11:20","end":"11:30"},{"start":"14:30","end":"15:00"}]},"thursday":{"start":"09:00","end":"18:00","breaks":[{"start":"11:20","end":"11:30"},{"start":"14:30","end":"15:00"}]},"friday":{"start":"09:00","end":"18:00","breaks":[{"start":"11:20","end":"11:30"},{"start":"14:30","end":"15:00"}]},"saturday":null}

Works fine!!

:---)

[Tom Le]

Edio,

here it is.  in the settings.php and users.php move the

                                <tr>
                                    <td><label class="checkbox"><input type="checkbox" id="sunday" /><?php echo $this->lang->line('sunday'); ?></label></td>
                                    <td><input type="text" id="sunday-start" class="work-start" /></td>
                                    <td><input type="text" id="sunday-end" class="work-end" /></td>
                                </tr>

from bottom to the top before monday tag

[Edio Ilha]

Hi there!!

This is just a workaround solution!!

I will wait for a better solution so.. I will keep reading the code.

Change this lines in /views/backend/users.php

<tr>

    <td><label class="checkbox"><input type="checkbox" id="sunday" />

        <?php echo $this->lang->line('sunday'); ?></label></td>

    <td><input type="text" id="sunday-start" class="work-start" /></td>

    <td><input type="text" id="sunday-end" class="work-end" /></td>

</tr>

Copy and paste from de end to the beginning before Monday.

The code starts around the line 304 after tbody tag

;---)

[Edio Ilha]

lol

[Edio Ilha]

That was funny!!

Any way thanks!!

;---)

[Craig Tucker]

Here you go:

in assets/js/backend_calendar.js

Line 30

Change

            'firstDay': 1, // Monday

to

            'firstDay': 7, // Sunday

Works!

[Craig Tucker]

No I am seeing now.  Sorry. 

[Tom Le]

Edio,

You have to change the settings.php as well; otherwise, when you add new user, the working_plan will start on Monday.

[Craig Tucker]

I have tried moving up Sunday both in user and settings and I am still not moving the slots over.  Odd.

[Craig Tucker]

Ok, what I see is that I have to go in to my working plan, click edit, and save again,  Then it moves.

[Tom Le]

Yes, you have edit all the providers again.  We should come up with a better solution, I think Europe and Asia starting day is Monday, right?

[Craig Tucker]

Yes I think you are right.  So, what we have is this:

Changing the Calendar Format from Monday through Sunday to Sunday through Saturday

In /assets/js/frontend_book.js

Line 48 Chang:  

             firstDay: 7, //Sunday

in assets/js/backend_calendar.js

Line 30 Change:
            'firstDay': 7, // Sunday

In application/views/backend/settings.php
At line 138 move:

<tr>
 <td><label class="checkbox"><input type="checkbox" id="sunday" /><?php echo $this->lang->line('sunday'); ?></label></td>
        <td><input type="text" id="sunday-start" class="work-start" /></td>
        <td><input type="text" id="sunday-end" class="work-end" /></td>
</tr>

from bottom to the top before monday tag

In /views/backend/users.php
At line 304 move

<tr>
    <td><label class="checkbox"><input type="checkbox" id="sunday" />
        <?php echo $this->lang->line('sunday'); ?></label></td>
    <td><input type="text" id="sunday-start" class="work-start" /></td>
    <td><input type="text" id="sunday-end" class="work-end" /></td>
</tr>

from bottom to the top before monday tag

In the backend, log in as Administrator, go to Users, go to Providers
* If no provider add one and add "working plan"
* If one already exsts, go Providers, go to Working Plan, edit, save

Military to AM PM modifications
https://groups.google.com/forum/#!searchin/easy-appointments/Format/easy-appointments/fWdjQLYgNA4/H-hVG-VHdO4J
Read the complete thread

This deals with changing booking hours from q15 to q60 or what ever works for you
https://groups.google.com/forum/#!topic/easy-appointments/BnN8sz_XZcY

Those are all the basic time modifications.  It would be nice to have buttons for this but it is not too bad to just edit in.

[Craig Tucker]

More backend formatting issues: 

1. The calendar dates at the top  are in day/month format in stead of US month/day format
2. The "Appointment" button date picker is also in Monday to Sunday format.  I think I would like to use the jQuery date picker like we use on the front end here. 

[Tom Le]

my back end calendar shows the correct format

display shows 16/03

and in +appointment picker it shows 16/03

Not sure why it should be different.

[Tom Le]

also my new appointment picker in the backend shows Sun-Sat

[Craig Tucker]

assets/backend_calendar.js

Change date format for the week and day views to US Month/Day style:

Line 38: Change

                'week': 'ddd d/M',
                'day': 'dddd d/M'

to

                'week': 'ddd M/d',
                'day': 'dddd M/d'

Line 1881: Change from Monday (1) to:

firstDay: 7  // for Sunday

[Károly Honti]

Hi!

Step by step!

Here!

https://rendszergazdamegoldasok.blog.hu/2018/09/14/easy_appointments_first_day_of_the_week

[Alex Tselegidis]

Hi Károly, 

thanks for publishing this :) 

Best regards,

Alex

Alex Tselegidis, Easy!Appointments Creator   Need a customization? Contact me in person!