New events calendar template

More
13 years 10 months ago - 11 years 11 months ago #9669 by andrew
The flexiCal template extends Flexicontent's capabilities to include working as a full-featured events calendar / events management component (like JEvents or JCal Pro or others in the JED's calendars & events category . It works by using a category page to display items in a calendar layout.

Download it here (consider it a v1.0 beta release)

To make it work, you should first create a new type (I called mine 'event') and then create (or assign) all the custom fields you would like to include in your events (this step is unnecessary if you already have a type that has the fields you would need for an event), and then configuring the category template params to work with that particular setup by specifying what fields are used for an event's dates, what fields for the time, etc.

In the site I originally developed this for, the type I created for events has (aside from the core fields, such as 'description'):
    Event Start Date (required)
    Event End Date (optional)
    Event Start Time (optional - uses my
time field plugin , included in the downloadable template package )
    Event End Time (optional)
    Event Type (a flexicontent select field with a couple options for classifying events)

In my case, the event type field is used to colour-code events within the calendar view (screenshots to come). Alternatively, in the params, you can specify to use the items' category to colour-code them; in that case, the category you want to be used for colour-coding (the template will also generate a colour key) must be set as the primary category for the event (and so the category that is being used to display them in the calendar view must be secondary, if that makes sense).

I'll try to post more information or clarification and some screenshots when I have a chance. For now, I'd love to hear any feedback.
Last edit: 11 years 11 months ago by andrew.

Please Log in or Create an account to join the conversation.

More
13 years 10 months ago #9700 by vlester
Hello Andrew,

Your template is just fabulous !!!
Thank you for sharing !

Everything works fine in the category view using the template FlexiCal. But I found out that the Time plugin prevents my other Flexidate field to be displayed on any item view of any type (you can see that in the enclosed image).
[attachment=1:2q2wsm20]<!-- ia1 -->Image 1.png<!-- ia1 -->[/attachment:2q2wsm20]
If I unpublish the plugin, then the flexidates are displayed.
Any idea why ?

Other little problem in the category view :
The start and end date are not displayed in the tooltip. .[attachment=0:2q2wsm20]<!-- ia0 -->Image4.png<!-- ia0 -->[/attachment:2q2wsm20]

Also, I didn't understand how to custom the categories colors. You said to create an event type field but with what kind of field type ?


Thanks a lot

Regards
Attachments:

Please Log in or Create an account to join the conversation.

More
13 years 10 months ago #9723 by andrew
Replied by andrew on topic New events calendar template
Thanks for trying the template and giving me your feedback.

vlester wrote: Everything works fine in the category view using the template FlexiCal. But I found out that the Time plugin prevents my other Flexidate field to be displayed on any item view of any type (you can see that in the enclosed image).

That's very strange, and something I haven't come across. I'll try to investigate when I next get a chance, but off the top of my head, I can't imagine why that would be happening.

vlester wrote: Other little problem in the category view :
The start and end date are not displayed in the tooltip.

That was something I had in the original version, but then removed. I'll add it back in with a parameter to turn it on off; a new version with that option will be available within a week.

vlester wrote: Also, I didn't understand how to custom the categories colors. You said to create an event type field but with what kind of field type ?

Don't let the "event type" field confuse you; that's just another way to classify the events, if you so choose. If you're using categories for classification, you don't need an 'event type' field. (In my case, the event type field is just a select field with a couple different options.)

The category colors are set in the CSS dynamically generated by the template (depending on the number of categories/event types detected). To customize it, you can just add your own CSS to override the dynamically generated CSS, which you can do by loading the calendar in the frontend, finding the CSS included in the <head> (the part with your category/event type names in it) and copying and pasting it into your template's CSS file. Then, you should add something simple to make sure your custom CSS overrides the original CSS (like just adding '.flexicontent' before each declaration) and customizing the colors. Obviously, that all requires some CSS knowledge.

Alternatively, I plan on trying to provide a way to customize the colors used in the params at some point in the future, but I'm not sure when I'll get around to doing that.

Hope that's mostly clear, and please let me know if it isn't.

Please Log in or Create an account to join the conversation.

More
13 years 10 months ago #9759 by vlester
Hello Andrew,

Thanks for your answer.
I modify the code of time.php and now it works replacing this
Code:
$field->label = JText::_($field->label); // execute the code only if the field type match the plugin type if($field->field_type != 'date') return; $field->{$prop} = $field->value ? $field->value : JText::_( 'FLEXI_NO_VALUE' );
by
Code:
$field->label = JText::_($field->label); // execute the code only if the field type match the plugin type if($field->field_type != 'time') return; $field->{$prop} = $field->value ? $field->value : JText::_( 'FLEXI_NO_VALUE' ); $n=0; foreach ($values as $value) { $field->{$prop}[] = $values[$n] ? JHTML::_('time', $values[$n] ) : JText::_( 'FLEXI_NO_VALUE' ); $n++; } $field->{$prop} = implode($separatorf, $field->{$prop});


I also added the possibility to add values and choose separator, though I'm aware the multiple values might be ignored in the agenda.

The complete file :
Code:
<?php /** * @version $Id: time.php 1.0 2010-07-28 14:11:51Z andrewp $ * @package FLEXIcontent * @author Andrew Patton * @copyright Copyright (C) 2010 Pure Cobalt. All rights reserved. * @license GNU/GPL v2 **/ defined( '_JEXEC' ) or die( 'Restricted access' ); //jimport('joomla.plugin.plugin'); jimport('joomla.event.plugin'); class plgFlexicontent_fieldsTime extends JPlugin { function plgFlexicontent_fieldsTime( &$subject, $params ) { parent::__construct( $subject, $params ); } function onDisplayField(&$field, $item) { $field->label = JText::_($field->label); // execute the code only if the field type match the plugin type if($field->field_type != 'time') return; // some parameter shortcuts $required = $field->parameters->get( 'required', 0 ) ; $multiple = $field->parameters->get( 'allow_multiple', 1 ) ; $maxval = $field->parameters->get( 'max_values', 0 ) ; $required = $required ? ' class="required"' : ''; // initialise property if (!$field->value) { $field->value = array(); $field->value[0] = ''; } if ($multiple) // handle multiple records { $document = & JFactory::getDocument(); //add the drag and drop sorting feature $js = " window.addEvent('domready', function(){ new Sortables($('sortables_".$field->id."'), { 'handles': $('sortables_".$field->id."').getElements('span.drag'), 'onDragStart': function(element, ghost){ ghost.setStyles({ 'list-style-type': 'none', 'opacity': 1 }); element.setStyle('opacity', 0.3); }, 'onDragComplete': function(element, ghost){ element.setStyle('opacity', 1); ghost.remove(); this.trash.remove(); } }); }); "; $document->addScriptDeclaration($js); $js = " var curRowNum".$field->id." = ".count($field->value)."; var maxVal".$field->id." = ".$maxval."; function addField".$field->id."(el) { if((curRowNum".$field->id." < maxVal".$field->id.") || (maxVal".$field->id." == 0)) { var thisField = $(el).getPrevious().getLast(); var thisNewField = thisField.clone(); var fx = thisNewField.effects({duration: 0, transition: Fx.Transitions.linear}); thisNewField.getFirst().setProperty('value',''); thisNewField.injectAfter(thisField); new Sortables($('sortables_".$field->id."'), { 'handles': $('sortables_".$field->id."').getElements('span.drag'), 'onDragStart': function(element, ghost){ ghost.setStyles({ 'list-style-type': 'none', 'opacity': 1 }); element.setStyle('opacity', 0.3); }, 'onDragComplete': function(element, ghost){ element.setStyle('opacity', 1); ghost.remove(); this.trash.remove(); } }); fx.start({ 'opacity': 1 }).chain(function(){ this.setOptions({duration: 600}); this.start({ 'opacity': 0 }); }) .chain(function(){ this.setOptions({duration: 300}); this.start({ 'opacity': 1 }); }); curRowNum".$field->id."++; } } function deleteField".$field->id."(el) { if(curRowNum".$field->id." > 1) { var field = $(el); var row = field.getParent(); var fx = row.effects({duration: 300, transition: Fx.Transitions.linear}); fx.start({ 'height': 0, 'opacity': 0 }).chain(function(){ row.remove(); }); curRowNum".$field->id."--; } } "; $document->addScriptDeclaration($js); $css = ' #sortables_'.$field->id.' { margin: 0px; padding: 0px; list-style: none; white-space: nowrap; } #sortables_'.$field->id.' li { list-style: none; height: 20px; } #sortables_'.$field->id.' li input { cursor: text;} #sortables_'.$field->id.' li input.fcbutton, .fcbutton { cursor: pointer; margin-left: 3px; } span.drag img { margin: -4px 8px; cursor: move; } '; $document->addStyleDeclaration($css); $move2 = JHTML::image ( 'administrator/components/com_flexicontent/assets/images/move3.png', JText::_( 'FLEXI_CLICK_TO_DRAG' ) ); $n = 0; $field->html = '<ul id="sortables_'.$field->id.'">'; foreach ($field->value as $value) { $field->html .= '<li>'.$pretext.'<input name="'.$field->name.'[]" type="text" size="'.$size.'" value="'.$value.'"'.$required.' />'.$posttext.'<input class="fcbutton" type="button" value="'.JText::_( 'FLEXI_REMOVE_VALUE' ).'" onclick="deleteField'.$field->id.'(this);" /><span class="drag">'.$move2.'</span></li>'; $n++; } $field->html .= '</ul>'; $field->html .= '<input type="button" id="add'.$field->name.'" onclick="addField'.$field->id.'(this);" value="'.JText::_( 'FLEXI_ADD_VALUE' ).'" />'; } else { // handle single records $field->html = '<div>'.$pretext.'<input name="'.$field->name.'[]" type="text" size="'.$size.'" value="'.$field->value[0].'"'.$required.' />'.$posttext.'</div>'; } } function onBeforeSaveField( $field, &$post, &$file ) { // execute the code only if the field type match the plugin type if($field->field_type != 'time') return; $newpost = array(); $new = 0; foreach ($post as $n=>$v) { if ($v != '') { // validate: $vParts = explode('h', $v); if (count($vParts < 2)) { if (strlen($vParts[0]) > 2) { $vParts = array(substr($v, 0, -2), substr($v, -2)); } else { $vParts[] = '00'; } } $vParts[0] = (int) $vParts[0]; $vParts[1] = (int) $vParts[1]; if ($vParts[0] > 23) $vParts[0] = 0; if ($vParts[1] > 59) $vParts[1] = 0; if ($vParts[0] < 10) $vParts[0] = '0' . $vParts[0]; if ($vParts[1] < 10) $vParts[1] = '0' . $vParts[1]; $newpost[$new] = $vParts[0] . 'h' . $vParts[1]; } $new++; } $post = $newpost; } function onDisplayFieldValue(&$field, $item, $values=null, $prop='display') { // some parameter shortcuts $separatorf = $field->parameters->get( 'separatorf', 1 ) ; switch($separatorf) { case 0: $separatorf = '&nbsp;'; break; case 1: $separatorf = '<br />'; break; case 2: $separatorf = '&nbsp;|&nbsp;'; break; case 3: $separatorf = ',&nbsp;'; break; default: $separatorf = '&nbsp;'; break; } $field->label = JText::_($field->label); // execute the code only if the field type match the plugin type if($field->field_type != 'time') return; $field->{$prop} = $field->value ? $field->value : JText::_( 'FLEXI_NO_VALUE' ); $n=0; foreach ($values as $value) { $field->{$prop}[] = $values[$n] ? JHTML::_('time', $values[$n] ) : JText::_( 'FLEXI_NO_VALUE' ); $n++; } $field->{$prop} = implode($separatorf, $field->{$prop}); } } ?>

Add have added that in the file time.xml :
Code:
<param name="allow_multiple" type="radio" default="1" label="FLEXI_FIELD_ALLOW_MULTIPLE" description="FLEXI_FIELD_ALLOW_MULTIPLE_DESC"> <option value="0">No</option> <option value="1">Yes</option> </param> <param name="max_values" type="text" default="0" size="2" label="FLEXI_FIELD_MAX_VALUES" description="FLEXI_FIELD_MAX_VALUES_DESC" /> <param name="separatorf" type="list" default="1" label="FLEXI_FIELD_SEPARATOR_FRONTEND" description="FLEXI_FIELD_SEPARATOR_FRONTEND_DESC"> <option value="0">FLEXI_SPACE</option> <option value="1">FLEXI_LINE_BREAK</option> <option value="2">FLEXI_PIPE</option> <option value="3">FLEXI_COMMA</option> </param>

I'm looking for a way to add another text field in the tooltip. I try that but it doesn't work :
Code:
echo $this->fields->field_name->display;

Any idea how I could do that ?

Thanks again for this great work

Regards,

Please Log in or Create an account to join the conversation.

More
13 years 10 months ago #9840 by andrew
Replied by andrew on topic New events calendar template
I'm glad to see you fixed your problems with the Time plugin. I initially developed the plugin to not support multiple values because I wanted to keep it as simple and concise as possible considering what it would be used for, and I thought it would be more intuitive for my clients to enter a start date and end date in two separate fields w. two separate labels, rather than as two values in one field. But I'm sure there are others who will appreciate that functionality, so thanks for adding it.

vlester wrote: I'm looking for a way to add another text field in the tooltip… Any idea how I could do that ?


That shouldn't be difficult. Around line 484 in category_items.php, you'll see this code:
Code:
$tooltipText = ($titleTooltip ? $monthItem->title . ' ' : '' ) . ( isset($monthItem->fields[$startTimeField]->value[0]) ? ' ' . $monthItem->fields[$startTimeField]->value[0] . (isset($monthItem->fields[$endTimeField]->value[0]) ? ' - ' . $monthItem->fields[$endTimeField]->value[0] : '') : '' ) . '::' . flexicontent_html::striptagsandcut( $monthItem->introtext, 200 );

Depending on where you want that text field, you need to add:
Code:
$monthItem->fields['name_of_text_field']->display
to the string (I think that will give you the value you're looking for). For example, if you want to display it as the main (not title) part of the tooltip, you could change the last line of the above code to:
Code:
. '::' . $monthItem->fields['name_of_text_field']->display;
Or if you wanted to display it in addition to the event's introtext, separated by a space, you could use:
Code:
. '::' . $monthItem->fields['name_of_text_field']->display . ' ' . flexicontent_html::striptagsandcut( $monthItem->introtext, 200 );

I hope that answers your question. Thanks for trying my work out and building on it!

Cheers,
Andrew

Please Log in or Create an account to join the conversation.

More
13 years 10 months ago #9841 by yopyop001
Thanks a lot for sharing,

I'll test and use it soon, it looks very great.

Regards

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.310 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline