Events Calendar with Monthly Image & Effect

You mean you'd like it to appear like a physical paper calendar with an image above the date cells?

Is this for the calendar module linking to lists of events per day or the main component view (with details of the events per day)?

Would you be happy to upload images with specific names e.g. cal201301.jpg for january 2013 or cal201405.jpg for May 2014?

'Page flip' - I presume this is only for the image and not for the text of the calendar beneath?

It should be feasible (dependent on your answers to the above questions)

Geraint

Yes, like a physical paper calendar with images above the cells. To look as much like the uploaded image.

It is for the calendar module, linking to list events.

I would be happy to upload the images with specific file names.

'Page Flip' can be for only the image. If it was for both it would be good too.

Thanks, looking forward to your response.

Matt

Using javascript we could slide the image horizontally or vertically or disolve one into another. A rolling from the corner page turn effect is not straightforward though.

It could be implemented as a template override which we could help you implement as a gold member.

OK. That is great. A slide effect on the image will suit.

One last thing

Can the calendar template be customised to look very much like the image example?

If you know some CSS then the customisation is fairly straightforward since you can customise the content of the cells - see http://www.jevents.net/jevents-15-topme ... ut-editing

I have purchased a gold membership.
I am downloading and installing jEvents.

I should be ok with the CSS on the min-calendar.

Please let me know the process to implement the template override.

thanks.

1. First step is to choose your JEvents layout from one of the 4 built in or the club addons http://www.jevents.net/products/club-layoutsthemes - I'll assume you are using the Iconic layout - if you use a different layout you will need different file names and the line numbers will not match up but you can search for the relevant code.

2. Copy the file modules/mod_jevents_cal/tmpl/iconic/calendar.php to templates/YUOURTEMPLATE/html/mod_jevents_cal/iconic/calendar.php and then make your changes in this file.

3. In the calendar.php file at line c. 149 you'll see where $content is first declared

		$content = <<<START

<div id="extcal_minical">

	<table cellspacing="1" cellpadding="0" border="0" align="center" style="border: 1px solid rgb(190, 194, 195); background-color: rgb(255, 255, 255);">

...

change it to

		$medparams = & JComponentHelper::getParams('com_media');

		$mediapath = JURI::root(true) . '/' . $medparams->get('image_path', 'images')."/calendar/";

		$calimg = '<img src="' . $mediapath .  'calimage'.$cal_year.$cal_month.'.jpg" class="calendarimage" />';		

		$content = <<<START

<div id="extcal_minical">

	$calimg

	<table cellspacing="1" cellpadding="0" border="0" align="center" style="border: 1px solid rgb(190, 194, 195); background-color: rgb(255, 255, 255);">

and include this additional code before the closing } in this file

	function _navigationJS($modid){

		static $included = false;

		if ($included) return;

		$included = true;

?>

	<script language="javascript"  type="text/javascript" ><!--

	function navLoaded(elem, modid){

		var myspan = document.getElementById("testspan"+modid);

		var modbody = myspan.parentNode;

		/*

		 * 

		       modbody.set("tween", {

            onComplete: function() {

                this.element.set("html", elem.innerHTML);

                this.removeEvents("complete");

		this.element.style.visibility='visible!important;';

                this.element.morph({'opacity':'0.7'});

            },

            duration: 1000

        }).fade(0);

		*/

	   var myFx = new Fx.Tween(modbody, {property: 'opacity'});

myFx.start(1,0).chain(

    function(){ modbody.set("html", elem.innerHTML);  this.start(0,1); }

); 

//		modbody.innerHTML=elem.innerHTML;

	}

	function callNavigation(link){

		var body = document.getElementsByTagName('body')[0];

		if (!document.getElementById('calnav')){

			myiframe = document.createElement('iframe');

			myiframe.setAttribute("name","calnav");

			myiframe.setAttribute("id","calnav");

			myiframe.style.display = "none";

			body.appendChild(myiframe);

		}

		else {

			myiframe = document.getElementById('calnav');

		}

		myiframe.setAttribute("src",link);

	}

	//--></script>

	<?php }

This should fade out and in the new calendar module values (and image) when you navigate.

the images should be called calimage201301.jpg etc. in the folder images/calendar/

Let me know how you get on

I have followed the steps provided. I can't see any changes, I am sure I must be doing something wrong, maybe in the configuration.

Regardless, I have some additional questions before I go forward any further (that I maybe should have clarified earlier):

1. Is this change applied to the mini-calendar module or the Calendar view? Both would be nice

2. As I am using a responsive template, Can both the mini-calendar and calendar view be set to 100% width rather than a specific pixel width (this applies to the calendar images too)?

3. After speaking to the client, I will the calendar to represent the paper calendar supplied as accurately as possible. This is very important. Do you foresee any issues is this regard?

I am willing to pay additional to get these features to work, the clients budget is good so far.

Can you send me the URL and login details via PM so I can take a look and check what you have done.

The main calendar in the screenshot is broadly in line with the 'geraint' template so customising the colour scheme with CSS will be quite simple (see http://www.jevents.net/jevents-15-topme ... or-jevents) or you could take a look at the iconic layout (http://www.jevents.net/products/club-layoutsthemes ) which has several colour options which can be customised (Note that I have a prototype responsive version of the iconic layout that dynamically changes from the calendar layout to a list layout if the screen width is narrow). the width of the module can easily be set using CSS and width:100%!important on the appropriate selectors.