MODx - own ajax calendar of events / news 2

The weekend is difficult for my health, but I was able to rewrite my calendar of events for ModX.

I remind you that the snippet takes events from the specified MODx directory and generates a calendar with events by day, which are displayed when you hover on the desired day.

What is the difference from the previous version?
The most important thing is that the calendar is drawn not by a third-party jquery.datepicker plugin, but by php. Css classes are attached to each cell, depending on their properties. All classes, the names of the days of the week, the months are set in the snippet parameters, which makes them easy to change.
')
Picture to attract attention.

Registration

So, the generated calendar has the following html structure:

<div id='Calendar'> <table class='calendar'> <tr> <td class='prev' name=' .-'> </td> <td class='month' colspan='5'> </td> <td class='next' name=' .-'> </td> </tr> <tr> <th class='dow'> </th> </tr> <tr> <td class='weekend isevent' id='calendar_1'> <div class='date'></div> <div class='event'><div> </td> </tr> </table> </div> 

As you can see, the event is in the same cell as the date and has its own class. Therefore, it can be easily hidden and displayed using css.

Almost without design, with hidden events, the calendar looks like this:


Each cell of the table, depending on different parameters, is supplied with a class css. This is the second feature of the calendar - the appearance can be changed as you like, and the class names are set in the snippet parameters.

It's time to tell which classes are used by default:

 .calendar -    .dow -      .month -       .workday -   .weekend -  .today -  .isevent -    .noevent -    .event - div   .date - div   .emptyday -  ,   .prev -      .next -      

This way, you can easily customize the calendar by assigning the desired layout to these classes. Want to highlight the weekend - just make it a different color, such as red. Month and days of the week can be made fatter, days with events - blue, today - yellow.
And it will turn out like this:

Beauty!

You can use qTip to display hidden divs. It is better to do without him.

  $('.isevent').live('mouseover',function() { id = this.id; $('#' + id + ' .event').show(); }) $('.isevent').live('mouseout',function() { id = this.id; $('#' + id + ' .event').hide(); }) 

  .isevent { color: black; text-align: left; position:absolute; z-index: 10; display: none; background: #fff; border: 1px solid #AAA; padding: 5px; width: 250px; margin-top: -10px; margin-left: 10px; } 

Here's what happens:


The div is hidden, when you hover over the cell, it is displayed, and the entire design in css. The main thing - position: absolute and z-index: 10.
Everything is easy and simple.

Snippet

I will not give the snippet code, but I will give all the parameters and placeholders.

Options

 &id  : ,   : [int] : id  - MODx    &month  : date('m') : [int] :     &year  : date('Y') : [int] :     &dateTV  : event_date : [string] :   TV      &dateFormat  : '%d %b %Y %H:%M' : [string] :  ,  strftime() &tplEvent  : tplEvent : [string] :    MODx &tplMain  : tplCalendar : [string] :    MODx &calendar_id  : Calendar : [string] :     . ,        &class_calendar  : calendar : [string] :  css      &class_dow  : dow : [string] :  css      &class_month  : month : [string] :  css       &class_workday  : workday : [string] :  css      &class_weekend  : weekend : [string] :  css     &class_today  : today : [string] :  css     &class_event  : event : [string] :  css    div   &class_isevent  : isevent : [string] :  css        &class_noevent  : noevent : [string] :  css        &class_date  : date : [string] :  css      &class_emptyday  : emptyday : [string] :  css     ,   &class_prev  : prev : [string] :  css         &class_next  : next : [string] :  css         &dow_names  :   &lang : [string] :      ,  ,  .  ,   . &month_names  :   &lang : [string] :    ,  ,  .  ,   . &btn_prev  : '«' : [string] :       &btn_next  : '»' : [string] :       &lang  : 'en' : [en,ru] :        &show_errors  : 1 : [0|1] :  ,   -  &first_day  : 0 : [0|1] : 0 -   - . 1 -   - . 

Placeholders

In the snippet, service placeholders are used with the names of the css classes for the design, you can change them through the parameters that I described above. These holders do not need to touch.

 [+ec.Calendar+]  ,      [+ec.calendar_id+]     [+ec.class_calendar+] css     [+ec.class_dow+] css    [+ec.class_month+] css     [+ec.class_workday+] css    [+ec.class_weekend+] css   [+ec.class_today+] css   [+ec.class_event+] css   [+ec.class_isevent+] css     [+ec.class_noevent+] css     [+ec.class_date+] css   [+ec.class_emptyday+] css    [+ec.class_prev+] css     [+ec.class_next+] css     

And also there are placers, for substituting event values:

 [+ec.num+]    . ,         .    ,        TV   . ,    . [+ec.date+]  . [+ec.url+]   . [+ec.title+] ,   pagetitle  MODx. [+ec.desc+]  ,   introtext  MODx. 

Now download the archive and unpack. We create a snippet eventsCalendar2 in the MODx admin panel , copy the contents of the eventsCalendar2.snippet.php file into it.
We create two chunks, tplEvent2 and tplCalendar2 , these are eventsCalendar2.tplEvent.html and eventsCalendar.tplCalendar2.html respectively.

Create a new MODx document and call the snippet:

 [!eventsCalendar2? &id=`13` &calendar_id=`Cal1` &dateTV=`event_date` &dateFormat=`%d %b %Y %H:%M` &tplEvent=`tplEvent2` &tplMain=`tplCalendar2` !] 

Do not forget, you should have qTip on your page!

If you want to translate the calendar into English - change the parameters of the names of days and months. Also, you can call several calendars on one page - you only need to show everyone your & calendar_id.

The tplCalendar2 chunk contains all the design of the calendar, you can change it as you please, but don’t trifle the names of the placeholders!

There are no shortcomings of the previous calendar. Everything works smartly and smoothly. Sometimes it can get rid of qTip and stop showing pop-ups - but this is not my fault. In principle, hidden divas can be displayed without him, the methods are complete.

If you have questions and suggestions - do not hesitate to write, if that - I will add a topic.
Bugreport we post here, if users like the calendar - send it to the MODx repository.

Download archive with snippet and chunks .

View calendar in work (Revolution version) .

UPD.
I got rid of qTip, updated the topic and the archive with the snippet.

UPD.2
Added English. Added 3 parameters: & lang, & first_day, & show_errors. Updated the description of the parameters, uploaded the new version of the snippet.

UPD.3
The generated code is aligned with the W3C standards and passes the validator.
Added readme.html to the archive.
Updated the link in the topic.

UPD.4
Events are now selected only for the desired month, which significantly reduces the load on the system.
Added the ability to use any TV parameters and properties of resources in templates.
Added time shift parameter in hours & time_shift, for those sites where the time zone does not match hosting.
The default settings are set for Russia. The week starts on Monday, the language is Russian.
Changed tplEvent2 chunk, in accordance with new placeholders.

The project went to code.google.com . Further development will be there.


UPD.5
Redid for Revolution, can be downloaded on GoogleCode.