next »

[Jabberwock]

New version v0.8
Special (Very Mega :p) thanks to SA-Q for english translation

See the french post please : http://modxcms.com/forums/index.php/topic,15219.msg98299.html#msg98299

Hey all,
I wanna share with you a little snippet that I made, with help from Sa-Q aka Anne Provost.
It is a personal calendar / agenda which allows one to schedule several events.
Since i'm French, the language used is not english for now, but i am willing to translate it soon.
 
You can create your own language file, for all messages.
Send it to me !

online Demo : CALx

Because pictures are more relevant than words, a few screenshots :

This is the basic interface :


When you click (or hover, depending the snippet call) on a light greenday - ie a day with one event -  you have access to more details about this event, in a window.


When you click (or hover, depending the snippet call) on a dark greenday - ie a day with two or more events - you have access to the number of events planned for that day.


Then, if you click on "Cliquez ici pour plus de détails" ( meaning "Click here for more details") , a listing of all the events planned for the day is displayed :


Installation/ Set up :

• Create a folder in the assets/snippets/ folder of your MODx installation, and name it ‘CALx'
• Copy the content of the .zip file in it 
• In the Manager, create a new snippet and name it "CALx"
• In the manager, create a new snippet and name it ‘CALx’ , then copy the following code inside it :  :

Code:

<?php
$CALxPath = $modx->config['base_path']. 'assets/snippets/CALx/';
include_once($CALxPath.'CALx.class.php');
$objCALx = new CALx();

$objCALx->getFolder=$getFolder;
$objCALx->getTypeProcess=$getTypeProcess;

if(isset($cssStyle)){$objCALx->cssStyle=$cssStyle;}else{$objCALx->cssStyle='defaut';}
if(isset($chunkCSSName)){$objCALx->chunkCSSName=$chunkCSSName;}
if(isset($inactDay)){$objCALx->inactDay=$inactDay;}else{$objCALx->inactDay='6';}
if(isset($dayStart)){$objCALx->dayStart=$dayStart;}else{$objCALx->dayStart='0';}
if(isset($showOtherMonth)){$objCALx->showOtherMonth=$showOtherMonth;}else{$objCALx->showOtherMonth='none';}
if(isset($lang)){$objCALx->lang=$lang;}else{$objCALx->lang='english';}
if(isset($useTV)){
if(!isset($dateStartTVName) || !isset($dateEndTVName)){
$useTV='false';
}
$objCALx->useTV=$useTV;
}else{$objCALx->useTV='false';}
if($useTV=='true'){
$objCALx->dateStartTVName=$dateStartTVName;
$objCALx->dateEndTVName=$dateEndTVName;
}
if(isset($popupSize)){$objCALx->popupSize=$popupSize;}else{$objCALx->popupSize='300';}
if(isset($toolTipPosition)){$objCALx->toolTipPosition=$toolTipPosition;}else{$objCALx->toolTipPosition='CENTER';}
if(isset($popupType)){$objCALx->popupType=$popupType;}else{$objCALx->popupType='2';}
if(isset($idDocYear)){$objCALx->idDocYear=$idDocYear;}
if(isset($idDocMonthEvents)){$objCALx->idDocMonthEvents=$idDocMonthEvents;}

$CALx = $objCALx->Run();
$objCALx='';
return $CALx;
?>

• In order to use TV’s: create 2 Tv’s with our utiliser les TV
• Create 2 Tv’s set as:
          ‘Type’:  'Date'
           ’Widget: 'Date Formatter'
           *Do not change the format.
           'Select the template where they will be available
  

Exemple of TV : Start date


End Date

• In order to use the CSS chunk :
• create  a new chunk and paste the content of one the files in /CALx/style, depending of the style of your website[/li
  
  • indicate the name of the chunk to the &chunkCSSName parameter.
  • If the chunk is not created, or if the style is not defined, the default style is /CALX/Style/defaut_style.css.
  
  Call of the snippet :
  In order to call the snippet, copy the following code :
  

Code:

[[CALx? &getFolder=`id` &idDocYear=`ìnt` &idDocMonthEvents=`int`
&dayStart=`int` &inactDay=`int` &lang=`string`
&useTV=`bool` &dateStartTVName=`string`
&dateEndTVName=`string` &popupType=`int` &popupSize=`int`
&toolTipPosition=`string` &showOtherMonth=`string` &chunkCSSName=`string`
&getTypeProcess=`string`]]

Parameters
&getFolder [int]
      The number associated with the folder containing the events.
   
   &lang [string] (english | french | spanish, default: english)
      The name of the language chosen. That’s the prefix of the language file of the ‘lang’ folder.
      Ex : 'french" stands for the file 'lang/french.lang.php'
   
   &getTypeProcess [createCal | showMultiEvent ]
   createCal -> Creates the calendar, the links and adds color to the cells. 
   showMultiEvent -> Creates the listing page, with a link for each event.
   showFullYear : creates the list of calendars of a whole year
   showAllMonthEvent : creates the list of all the events of a month

  &idDocYear [int] (optional) : the number of the document containing the call of the CALx snippet with &getTypeProcess=`showFullYear`.
  Creates a link towards this document below the calendar.

  &idDocMonthEvents=`ìnt` (optional) : the number of the document containing the call of the CALx snippet,
  with the  &getTypeProcess=`showAllMonthEvent` parameter.Creates a link towards this document below the calendar

   &dayStart [0 | 1 | 2 | 3 | 4 | 5 | 6] (default: 0)
      The day chosen to start the week.
      The values are :
         0 : Monday
         1 : Tuesday
         2 : Wednesday
         3 : Thursday
         4 : Friday
         5 : Saturday
         6 : Sunday
   
   &inactDay [0 | 1 | 2 | 3 | 4 | 5 | 6] (par défaut : 6)
      The day of rest
      The values are :
         0 : Monday
         1 : Tuesday
         2 : Wednesday
         3 : Thursday
         4 : Friday
         5 : Saturday
         6 : Sunday
   
   &useTV [true | false] (par défaut : false)
         If you wish to use Tv’s instead of pub dates, set this parameter as ‘true’     
         If you use Tv’s, the  dateStartTVName and  dateEndTVName parameters are mandatory!

         If you forget them,  $useTV will be reset as `false`
   
   &dateStartTVName [string] Mandatory if  &useTV=`true`
            Indicates the name of the Tv associated to the date on which the event begins.
   
   &dateEndTVName [string] Mandatory if  &useTV=`true`
            Indicates the name of the Tv associated to the date on which the event ends.

   &popupType [0 | 1 | 2] (default: 2)
      Indicates the type of pop up chosen for the tooltip.
      Values:

• 0 : the tooltip appears on hover, no link.
• 1 : the tooltip appears on hover and allows you to click on a link.
• 2 : the tooltip appears on click and allows you to click on a link.

   
   &popupSize [int] (par défaut : 300)
            Size of the pop up ( in pixels )
           
   &toolTipPosition [CENTER | LEFT | RIGHT | ABOVE | BELOW] (default: CENTER)
      Position of the pop up.

   &chunkCSSName [string] : contains the name of the chunk with the CSS classes.

   &showOtherMonth [previous | both | next | none ] (default: none) : displays the last days of the previous month, the first days of the
   following  month, both or neither.

Notes :
* If there are over 1 event for one day, a pop up show up with a link to a listing page.
* The style of this agenda ( colors etc. ) can be totally transformed to suit your needs.
* Do not erase the document created in the folder holding all the events, it is the document allowing the listing of events.
* Do not pay attention to the subfolders, I will change them soon in order to make this snippet clearer and simpler.

Change logs
v0.6

• a link allows one to see all the events of the current month.
• CALx can now display events lasting more than one month.
• if the content ([*content*]) of the event does not contain informations, the 'Click here for more details' link does not show.
• a parameter &showOtherMonth=`string`  has been added, allowing to display the last days of the previous month, the first days of the following month, both or neither. ( The events that may happen on these days are not displayed again. )
• a parameter &idDocMonthEvents=`ìnt`  has been added, the 'int' being the number of the document containing the call of the CALx snippet, with the &getTypeProcess=`showAllMonthEvent` parameter.
• a parameter &chunkCSSName  has been added, containing the name of the chunk with the CSS classes.

V0.4
Fixed a bug with the choice of templates for multi events.
Fixed a bug for the utf8.
You can now choose between the pub dates and TV's to set the dates.
Parameters have been added to indicate the names of the TV’s corresponding to the beginning and end of the event.
XHTML 1.0 Transitional

V0.3
parameter has been added for the type of tooltips :
0 : the tooltip appears on hover, no link.
1 : the tooltip appears on hover and allows you to click on a link.
2 : the tooltip appears on click and allows you to click on a link.
A parameter has been added to the tooltips, so that you can set their size ( pixels ).
A parameter has been added to the tooltips, so that you can change their position :
LEFT, RIGHT, CENTER, ABOVE, BELOW
A parameter has been added to allow one to change the day which starts the week.
ex : 0 to start on monday, 6 for sunday, etc. Any day can be chosen.
A parameter has been added so that you can change the day of rest.

V 0.2

• Functions with or without javascript
• The path has been changed so that it works with MODx 0.9.5
• Not only has it been translated but the language is now chosen in the call of the snippet
• Tooltips 'title' have been added
• The style of the navbar can be changed thanks to a new CSS class

That's it. Thanks in advance for your tests, comments and help.

You can post your feedback to : CALx Repository thread support
Don't forget to vote for this snippet

[rthrash]

Nice work and thanks for sharing. Have you considered going ahead and making a version that uses TVs for the start/end dates?

[Jabberwock]

Thank you.

The next version - already in preparation - will use TV's.

[davidm]

That's cool news Jabberwock, it will allow to change the start date since pub date can't be changed easily : again, thanks for this (much needed) snippet

[doze]

Great work Jabberwock! Much appreciated.

Could someone move this topic to the "In development" forum?

[maff]

Nice work Jabberwock!

The registered scripts (CSS and Overlib) didn't work for me on modx 0.9.5. I had to change 2 lines in your code to get it to work:

after line 165 i added this line

Code:

$this->base_url = $modx->config['base_url'];

and i changed line 172 from this

Code:

$this->pathPrefix = "[(site_url)]assets/snippets/CALx";

to this

Code:

$this->pathPrefix = $this->base_url."assets/snippets/CALx";

Would it be possible to get it to work without JS? E.g. when you click on a day with events the page loads with some GET Params and the events get shown?

[Jabberwock]

Hi,

Thanks for your answers

I'm currently using the 0.9.6 version of Modx, but i will try to integrate your changes and make it work that way.

We are still improving this snippet so that the next version will function even if JS has been inactivated.

I'm really glad that i can participate in making Modx even more competitive and that i can belong in this community.

(Sa-Q is too, and say thanx for your suggestions. )

[Jabberwock]

Hey all !
THis is the new version of CALx.
The changelogs are in the previous post.
I'll include TV's in the next version, we promise, and we still have ideas to make this snippet even better...

You can create your own translation for the different messages.

[sirlancelot]

Would it be possible to see an online demonstration of this snippet?

[Jabberwock]

Of course : here

It's a little home server , you have always the latest version on this server.

[Jabberwock]

All the MODx community is invited to test the latest version of CALx.
The demo contains both the french version and the english one, with two kinds of tooltips.

Some new features in the latest version include :

• Fixed a bug with the choice of templates for multi events.
• Fixed a bug for the utf8.
• You can now choose between the pub dates and TV's to set the dates.
• A parameter has been added for the type of tooltips :
• 0 : the tooltip appears on hover, no link.
• 1 : the tooltip appears on hover and allows you to click on a link.
• 2 : the tooltip appears on click and allows you to click on a link.
• A parameter has been added to the tooltips, so that you can set their size ( pixels ).
• A parameter has been added to the tooltips, so that you can change their position :
  LEFT, RIGHT, CENTER, ABOVE, BELOW
• A parameter has been added to allow one to change the day which starts the week.
• ex : 0 to start on monday, 6 for sunday, etc. Any day can be chosen.
• A parameter has been added so that you can change the day of rest.

[Jesse R.]

This is coming along very nicely.  Great work!

[sirlancelot]

http://homeworks.dyndns.org/devcalx/index.php?id=6&jour=15&mois=6&annee=2007

I clicked on a day that had two events happening. The english version.

[Jabberwock]

• Valid XHTML 1.0 Transitional

@sirlancelot, yes i haven't changed the call snippet on this page :x, it's ok now.

I think that,  for the next version, i'll change the way  multi events are called.

[charliez]

hi jabber,

I am currently using Kalender so excuse my partiality...

1) I like better the use of overlib in Kalender... even in the multi-event days, you can see both
events by just hovering...
2) Also the "popup" or tooltip looks better in Kalender with different colors for place, hour, event...
3) loved CALx click in the event and go to a page!!!
4) loved multi-day events...
5) navigation is OK, pretty standard...
6) I think you have adjustable start of the week... neat!!
7) multilanguage, wow!
a come back to today link would be nice... (hahah, that is an 8 ),    not )

That is my feedback for now...
great work!   

[Jabberwock]

you can see both
events by just hovering...

Yes but if you have more than 2 events ?
I can show 2 events with two links, but where do we stop ? 2 ? 3 ?
Maybe you want a parameter to choose the number ?

Also the "popup" or tooltip looks better in Kalender with different colors for place, hour, event...

You can choose the color in the CSS, not for an event in particular, but I use overlib too, and i had (i think :p) all the class in the CSS.
For the hour, it's an idea, for the moment i'm focalizing on the dates.

I think you have adjustable start of the week... neat!!

Yes because, you start (most of the time) the week on Sunday, but French people start on Monday

a come back to today link would be nice... (hahah, that is an 8 ),    not Cool )

You want to ? i don't know if i can :/

The 0.3 version will be downloadable on Saturday or Sunday I think.

For the future i think :

• add ajax.
• show  all the events of a month or a year
• add CSS for design all the cell of the tablea
• add the possibility to use a chunck for the multi events list
• add a possibility to use a chunck for design the tootip
• a real "gestion" of the hours of the events

[Jabberwock]

The 0.4 version of CALx is available.

Sa-Q is still working on the english translation, of the installation post.

[Jabberwock]

Somebody can move this Topic in the "In developpement" section ?

Thank you.

[FuryDE]

Hello, I dont't know if I am too dumb, but where can I download your snippet?

As ist seems, you are engaging into this snippet. So I maybe will discontinue my little work on Kalender. Does calX support themes like Kalender?

Greetings
Martin

[dev_cw]

Hello, I don't know if I am too dumb, but where can I download your snippet?

There is a download it link at the end of the first post.