CGCalender not working frontend

[sjoerdd87]

Hello all,

A few days ago i asked for the color in the CGCalendar, but now i make a clean install of CMSMS version: 2.1.4
I just have installed a few modules:

Showtime2 3.5.3
CGCalendar 2.1.4.1
CGExtensions 1.53.10
CGSimpleSmarty 2.1.2

But i have a few questions about CGCalendar.

First problem i add in my template:

{cms_module module="CGCalendar"} but the calendar don't show in de frontend.
After searching i found a topic that says you need to add Jquery on the page.
Sow i added {cms_jquery} but the calendar don't show.

Maybe there is something that in need to add in my design, but i add all the templates from CGCalendar in my design, but still not working.

The Jquery is loaded:

Code: Select all

<__script__ type="text/javascript" src="http://mysite/lib/jquery/js/jquery-1.11.1.min.js"></__script>
<__script__ type="text/javascript" src="http://mysite/lib/jquery/js/jquery-ui-1.10.4.custom.min.js"></__script>
<link rel="stylesheet" type="text/css" href="http://mysite/lib/jquery/css/smoothness/jquery-ui-1.10.4.custom.min.css"/>
<__script__ type="text/javascript" src="http://mysite/lib/jquery/js/jquery.mjs.nestedSortable.js"></__script>
<__script__ type="text/javascript" src="http://mysite/lib/jquery/js/jquery.json-2.4.min.js"></__script>
<__script__ type="text/javascript" src="http://mysite/lib/jquery/js/jquery-migrate-1.2.1.min.js"></__script>

And a second question how can i edit the CSS? in the older versions you have an example CSS that you can change.

Also when i change Showtime to not loaded Jquery that isn't working any more, but Jquery is loaded?

Thanks for helping.

Gr. Sjoerd.

[sjoerdd87]

Here the full system information:

CMS Versie 2.1.4

Modules

AdminSearch 1.0.1
CGCalendar 2.1.4.1
CGExtensions 1.53.10
CGSimpleSmarty 2.1.2
CMSContentManager 1.1
DesignManager 1.1.1
FileManager 1.5.2
Gallery 2.1.6
MicroTiny 2.0.3
ModuleManager 2.0.2
Navigator 1.0.3
News 2.50.5
Search 1.50.2
Showtime2 3.5.3

[sjoerdd87]

Hello,

I check de broncode from the site and i see that:

Code: Select all

<div id="fullcalendar"></div>

Is loading, but i don't see anything on the website from the calendar.

Nobody that knows how to fix?

[borutvel]

I'm having the same problem. Thou not with fresh instalation but it seem that an update "broke" the calendar display.

[borutvel]

I've also tried fresh instalation. Same problem.

CMSMS 2.1.5

AdminSearch 1.0.2
CGCalendar 2.1.4.2
CGExtensions 1.53.12
CGSimpleSmarty 2.1.4
CMSContentManager 1.1.1
DesignManager 1.1.1
FileManager 1.5.2
MicroTiny 2.0.3
ModuleManager 2.0.4
Navigator 1.0.3
News 2.50.5
Search 1.50.2

jQuery links:
<__script__ src="https://ajax.googleapis.com/ajax/libs/j ... "></__script>
<__script__ src="https://ajax.googleapis.com/ajax/libs/j ... "></__script>

[calguy1000]

Just tested this, from a new installation of CMSMS 2.1.5 and it works as documented.

In my page template:
a: Make sure that jquery and jquery-ui is included and included only once. {cms_jquery} is one way of including jquery and jquery-ui
b: Call {cgjs_render} directly after the jquery stuff.

In my content page:
a: Disable wysiwyg
b: Added {CGCalendar}

In some page templates where javascript is done at the bottom (for example, the Simplex template that is included with a CMSMS stock install). adding {cgjs_render} directly before the < /body> tag worked fine.

[borutvel]

Thank you !!!!!!!!!

Works like a charm on both fresh and old instalation.

Never had {cgjs_render} in my template before.

You might consider updating module help Some old farts like me still read it

Thanks again!!

[sjoerdd87]

Just tested this, from a new installation of CMSMS 2.1.5 and it works as documented.

In my page template:
a: Make sure that jquery and jquery-ui is included and included only once. {cms_jquery} is one way of including jquery and jquery-ui
b: Call {cgjs_render} directly after the jquery stuff.

In my content page:
a: Disable wysiwyg
b: Added {CGCalendar}

In some page templates where javascript is done at the bottom (for example, the Simplex template that is included with a CMSMS stock install). adding {cgjs_render} directly before the < /body> tag worked fine.

Thanks a lot for helping Calguy it's working.
Maybe you can change it on the help page from the module, then everbody knows how to do?

Now maybe you have a answer for the second question how to style the calendar?
I wanna remove Week and Day on the right side.
And the day's where is a event need to have a different background color.
And also wanna remove the link on the event, because a wanna use it only as a calender view.

Thanks for the answer.

[calguy1000]

The 2.x series of CGCalendar uses the javascript fullCalendar library for doing the calendar (and day, month, week) views.

The smarty template is just used to initialize the fullCalendar plugin.
You should be able to achieve what you want by reading the documentation at https://fullcalendar.io/docs/
and some careful css stuff.

[sjoerdd87]

The 2.x series of CGCalendar uses the javascript fullCalendar library for doing the calendar (and day, month, week) views.

The smarty template is just used to initialize the fullCalendar plugin.
You should be able to achieve what you want by reading the documentation at https://fullcalendar.io/docs/
and some careful css stuff.

Calguy,

Thanks for the info, you now where i can find the Javascript and CSS files from CGCalendar?

Or can i change it by Design manager --> Templates --> CGCalendar FullCalendar View Sample, i think not because this is only a sample.
Tried and it's working, can i change the size by CSS div.fullcalendar?

And where are the other templates for?

CGCalendar Delete Event Form Sample
CGCalendar Edit Event Form Sample
CGCalendar Event View Sample
CGCalendar List View Sample
CGCalendar MyEvents View Sample
CGCalendar Search Form Sample
CGCalendar Search Results Sample

Thanks again for the answer.

Gr. Sjoerd.

[borutvel]

And where are the other templates for?

Layout - Design manager - Template types

[paulbaker]

Thanks for the info, you now where i can find the Javascript and CSS files from CGCalendar?

Or can i change it by Design manager --> Templates --> CGCalendar FullCalendar View Sample, i think not because this is only a sample.

I changed the CSS style of the FullCalendar this way:

In your page template you would normally have {cms_stylesheet} first and then JS calls (required for FullCalendar) and {cgjs_render} after this. Now, {cgjs_render} inserts a call to the default FullCalendar CSS, I can see it here in one of my sites:

Code: Select all

/tmp/cache/cgejs_711f6d7cfeccdf9f6388add18f018cd2.css

This CSS starts:

Code: Select all

/* jsloader//css file: /home/site/public_html/modules/CGCalendar/lib/fullcalendar/fullcalendar.min.css */
/*!
 * FullCalendar v2.3.2 Stylesheet
 * Docs & License: http://fullcalendar.io/
 * (c) 2015 Adam Shaw
 */

and has lots of code to style the FullCalendar.

For example:

Code: Select all

.fc-day-grid-event .fc-content
{
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}

Now, to override that you would normally just put some CSS in your own stylesheet. That won't work because your own stylesheet is called before the default FullCalendar stylesheet, so your own styles are overriden.

What you need is for another stylesheet to come after the FullCalendar stylesheet.

I did it like this:

Layout > Design Manager > Create new stylesheet, let's call it FullCalendarOverride

In your page template, after the {cgjs_render} call, add:

Code: Select all

{cms_stylesheet name="FullCalendarOverride"}

This inserts only the named stylesheet.

You can then add things to your FullCalendarOverride stylesheet, for example:

Code: Select all

.fc-day-grid-event .fc-content
{
  white-space: normal;
}

which will overwrite the default CSS and let the text wrap.

[pWorker]

Hi,

have had same problem with CGCalender. Inserted {cgjs_render} shortly before closing <__body>-tag in page template and now everything is working fine.

MfG


PS: Very n1 module!