How to build a work shift calendar module using WordPress

[Zander]

Hi,

I need to build a work disposing module for the internal website of a small company. Our boss needs to dispose day and night shifts for taxi cabs and drivers, so all can look up when to work.

Also he needs to make annotations to a shift, car or driver, if nescessary. Something like „pick up car key from other dude“. At the moment he uses Excel, makes a screenshot, puts arrows with annotations in it and wings the img over Telegram-Chat. Works, but is not cool.

I built a responsive thing using table elements and a pseudo-CMS (Sitecake), that is editable from the frontend, but it didn’t work well. Its this one.

So I thought, it’s time for WordPress.

Questions:

• How would I build that in WordPress? Can you point me in the right direction?

• Is there a plugin you can recommend for such a work/shift planning thing?

• Is there anything in HTML and WordPress that allows to move arrows and annotations around on a website? I don’t think so, but maybe you know?

• Any idea how to make those annotions visible? It boils down to tooltips, right?

Unfortunatley I am a newbie to WordPress and know almost no PHP. I am ok at HTML, CSS/ SCSS and that is basically it. And I do know how to copy and paste Javascript… ;)

[Beverleyh]

I don’t use WordPress, but I made this standalone, flat file calendar module that might work for you http://fast-apps.co.uk/fast_cal.php

You could assign a category colour to specific drivers, and your boss could add extra info against bookings/entries that appears in a popup.

[Zander]

This looks exactly like made for me! I haven’t tried it out yet, but I will in the next days and come back to you!

[Zander]

Hi Beverleyh,

I would like to first work the page locally, using Mamp. But I guess I have problems with the URLs.

I set up a “.test” domain in Mamp.

I typed in the urls in the config file but I guess I did it wrong.

I included the “php-include” of the calender on my page, just as described in the “read me” and the calender does show up. But its not connected to its css or to the php files of your app.

Any idea?

[Beverleyh]

Sounds like you missed this step in the installation instructions…

Styling the Fast Cal front-end
To style your Fast Cal, just use standard CSS, either in the head section of your website;

<style>
/* your styles here */
</style>

OR, put the CSS in your external stylesheet (without the style tags above).

You can find the demo CSS in the “examples/sample_calendar.php” and “examples/sample_calendar_list.php” files.

And for the “php-include” file, have a look inside and check that the top 2 paths are correct for your particular setup.

[Zander]

No, its not about styling, its the urls/ file paths that I just don’t get.

Should I put the folder “fast_cal_v1_0_1531401647” into the root or just the files and folders that it contains? In the manual it says “entire Fast Cal package” – what do you mean by that?

First I put the folder “fast_cal_v1_0_1531401647” into the root and I got the HTML of the example on my page. But no admin, no css.

Now it put the content (the files and folders) of “fast_cal_v1_0_1531401647” into the root, changed the file paths and now I get nothing.

I am confused.

[Zander]

Now I tried it on the live server and its the same. I am too stupid to get this right.

[Zander]

Wait, I think, I am getting there.

This is what I did:

changed the name of the folder with all the stuff in it to just “cal”.

changed the url in Mamp to “mysite.test:8888”. The “:8888” was the problem (again missed that detail).

changed the domain to “mysite.test:8888/”

changed the URL/ path to “mysite.test:8888/cal/”

[Author]

Posts