Pre-Sales

Events Calendar with Monthly Image & Effect

Feel free to ask questions you might have before purchasing a subscription in here.

Postby Brights » Tue Jan 15, 2013 1:32 am

Hi. I am looking for an events calendar that will also display a monthly image, for each month in 2013.

When clicking through to a new month a animation will show the 'Page flip over' As you do when changing the page/month with a physical calendar.

The calendar layout should look similar to the attachment.

I understand this is very specific, I am happy to pay for these additional features, along with any membership plan required.

Any assistance will be appreciated.
Attachments
IMG_0202.JPG
Calendar Example
IMG_0202.JPG (212.62 KiB) Viewed 2691 times
Brights
Gold Members
 
Posts: 5
Joined: Tue Jan 15, 2013 1:17 am

Postby Geraint » Tue Jan 15, 2013 10:37 am

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
JEvents Club members can get priority forum support at the Support Forum. As well as access to a variety of custom JEvents addons and benefits. Join the JEvents club today!
User avatar
Geraint
 
Posts: 42850
Joined: Fri Feb 15, 2008 6:14 pm

Postby Brights » Tue Jan 15, 2013 10:23 pm

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
Brights
Gold Members
 
Posts: 5
Joined: Tue Jan 15, 2013 1:17 am

Postby Geraint » Wed Jan 16, 2013 9:58 am

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.
JEvents Club members can get priority forum support at the Support Forum. As well as access to a variety of custom JEvents addons and benefits. Join the JEvents club today!
User avatar
Geraint
 
Posts: 42850
Joined: Fri Feb 15, 2008 6:14 pm

Postby Brights » Fri Jan 18, 2013 6:18 am

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?
Brights
Gold Members
 
Posts: 5
Joined: Tue Jan 15, 2013 1:17 am

Postby Geraint » Fri Jan 18, 2013 9:35 am

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
JEvents Club members can get priority forum support at the Support Forum. As well as access to a variety of custom JEvents addons and benefits. Join the JEvents club today!
User avatar
Geraint
 
Posts: 42850
Joined: Fri Feb 15, 2008 6:14 pm

Postby Brights » Sun Jan 20, 2013 10:43 pm

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.
Brights
Gold Members
 
Posts: 5
Joined: Tue Jan 15, 2013 1:17 am

Postby Geraint » Mon Jan 21, 2013 10:41 am

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
Code: Select all
      $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
Code: Select all
      $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
Code: Select all
   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
JEvents Club members can get priority forum support at the Support Forum. As well as access to a variety of custom JEvents addons and benefits. Join the JEvents club today!
User avatar
Geraint
 
Posts: 42850
Joined: Fri Feb 15, 2008 6:14 pm

Postby Brights » Tue Jan 22, 2013 12:13 am

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.
Brights
Gold Members
 
Posts: 5
Joined: Tue Jan 15, 2013 1:17 am

Postby Geraint » Tue Jan 22, 2013 11:26 am

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.
JEvents Club members can get priority forum support at the Support Forum. As well as access to a variety of custom JEvents addons and benefits. Join the JEvents club today!
User avatar
Geraint
 
Posts: 42850
Joined: Fri Feb 15, 2008 6:14 pm


Return to Pre-Sales

  • Who is online
  • View new posts
  • View unanswered posts
  • In total there are 0 users online :: 0 registered and 0 hidden (based on users active over the past 5 minutes)
  • Most users ever online was 94 on Tue Sep 01, 2009 12:33 am
  • Users browsing this forum: No registered users