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 : :
<?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
[list][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 :
[/list]
[[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`]]
&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
MODX Staff
