[BETA] MyCalendar3

[thomascz]

Hi people,

I have the thought (that many may share) that the calendar doesn't fit with long event title or with day with a lot of events.

As I use mycalendar3 to share music events in my town, i have simplified the calendar page (mycalendar_body.html) do get a one month list of day within events. (have a look : mycalendar )
Note that I have a forum for each musical style and one more for festivals therefore i added the forum's name before the name of the event thanx to a little change in mycalendar3.php :

Code: Select all

"line337 file mycalendar.php"

      $template->assign_block_vars('day_infos.date_event', array(
            'POPUP'            => $event,
            'U_EVENT'         => $topic['forum_name'] . ' ' . ' ' . $link . $topic_text,
            'DAY_BLOCK_BEGIN'   => ($block == 1),
            'DAY_BLOCK_END'      => ($block == 2),
            'U_EVENT_END'      => $can_read ? '</a>' : '</i>',

the problem is that when i have a event longer than one day (in february = février i have the festival "entre les mondes" supposed to last from the 21th to the 27th ) it doesn't work. Indeed, it doesn't fit anymore to use picture named "arrow****.gif" to show that the event go through some days. I just need to have the name of the event to be repeated each day of the event's lasting period.
But I just see that the name of the event is not repeated at all after the first day of its lasting period. However, the forum's name is repeated meaning that the php process knows that an event is present that day...

Any, i'am a newbie in php and it gaves me headache to understand why it doesn't works. If someone has time to check how to display events as i am tring to do, it could make this MOD more popular or at least it could fit some needs as mine.

cheers guys

[Sniper_E]

I'd have to see your template but that code parsing in the page looks pretty messed up.
It sounds like you are having a layout problem.

The first week in that page, the view source:

Code: Select all

   <ul>
      <li id="dateagenda">1 Février&nbsp;2010
   <ul>
   </ul>
      </li>
      <li id="dateagenda">2 Février&nbsp;2010
   <ul>
   </ul>
      </li>
      <li id="dateagenda">3 Février&nbsp;2010
   <ul>
   </ul>
      </li>
      <li id="dateagenda">4 Février&nbsp;2010
   <ul>
      <li>Jazz, funk&nbsp;&nbsp;<a href="./viewtopic.php?f=11&amp;t=395">jazz Manouche-scène ouverte tous les jeudis au Webster café </a></li>
   </ul>
      </li>
      <l id="dateagenda">5 Février&nbsp;2010
   <ul>
   </ul>
      </li>
      <li id="dateagenda">6 Février&nbsp;2010
   <ul>
      <li>Chanson, pop&nbsp;&nbsp;<a href="./viewtopic.php?f=69&amp;t=391">CONCERT 6 Fév. CHARMES Salle des fêtes </a></li>
   </ul>
      </li>
      <li id="dateagenda">7 Février&nbsp;2010
   <ul>
      <li>Metal,  Hard Core&nbsp;&nbsp;<a href="./viewtopic.php?f=8&amp;t=400">DAEDALION @ C Dimanch'd'Art " Le Pouzin 7 fevrier </a></li>
   </ul>

I only see three lines that look correct.

Your start <ul> and your end </ul> cancels itself out. You might as well not have it there.

Code: Select all

   <ul>
   </ul>

Your doing a </li> then a <li> after that.

Code: Select all

      </li>
      <li id="dateagenda">6 Février&nbsp;2010

All that code should look more like this:

Code: Select all

   <ul>
      <li id="dateagenda">6 Février&nbsp;2010</li>
   </ul>

[thomascz]

Hi,

Thanx for your answer. In fact, when we have :

Code: Select all

          </li>
          <li id="dateagenda">6 Février&nbsp;2010

or

Code: Select all

     <ul>
       </ul>

I think it is because the lines are empty (no events that days)

I changed the template to fill each list with something to fill the blanks: "events?" for <ul> and "event" for lines

you can see the result here : http://valence.rock-city.fr/mycalendar3.php

if you look the source code of the page i guess there is no more useless list. anyway I join the template and the php file.

I have the idea that the problem lays in the php file: with the original template of the MOD, when an event is repeated, only the picture " event_block_arrow.gif " is repeated in the "div"of each following day of the event until the last day. that mean that for the process/loop of the php file, it is not necessary to remember the name of the event for next days of the event as it is written in the first day of the event. As a consequence, i think that the variable " $topic_text " of " {day_infos.date_event.U_EVENT} " is empty the next days.
But as I want the event to be written each day of the event period (due to the way i show events), I have a blank the next days.
The proof is: i added the information "$topic['forum_name'] " at {day_infos.date_event.U_EVENT}. this info is written each day of the event. but the data "$topic_text" is not.
An exemple is the event :

"Festivals "Rencontres entre les Mondes" 6-èmes éditions"

and

Festivals = $topic['forum_name']
Rencontres entre les Mondes" 6-èmes éditions = $topic_text

This event last from 21 february to 26 february. You can see that $topic['forum_name'] (festival) is written each day of the event's period and "Rencontres entre les Mondes" 6-èmes éditions = $topic_text" is written only the first day.

As a consequence, if i am right, it would mean that the process/loop of the php file should be modified to display $topic_text each days of the event. But this is above my skills

[Anthies Janne]

Does this mod work with 3.0.6?

[thomascz]

Does this mod work with 3.0.6?

You my have seen:

Tested on phpBB version: 3.0.4

but it seems to work on 3.0.6 although i have not tested all features.

[wired076]

Does this mod work with 3.0.6?

You my have seen:

Tested on phpBB version: 3.0.4

but it seems to work on 3.0.6 although i have not tested all features.

It does work however there are a few layout bug issues. If I get a chance to resolve them from the stock standard files I will try and post an update here.

[Sniper_E]

Yes, these templates need a little work, especially the mini_cal template.

This is installed on a phpBB 3.0.6 local.

It doesn't look like it needs much work. The author did a nice job on this.
But it still needs a little tweaking to look fantastic.

This is the mini_cal with small changes to it.

You can see it needs some more work. It looked terrible before I doctored it.
The layout is a little off. I'll work up a solution also and share later.

[Sniper_E]

I'll work up a solution also and share later.

Note: I am no prosilver expert with my codes. This is what I've come up with.

But in the install directions he has a different edit for the index_body.html template than what I did.

Open index_body.html

FIND

Code: Select all

<!-- INCLUDE forumlist_body.html -->

AFTER ADD

Code: Select all

<!-- INCLUDE mini_cal_body.html -->

As you can see in the image, I placed the calendar below my forums instead of beside my forums.
If you want this in a side bar, that would have to be written different.
This is the new mini_cal_body.html template:

Spoiler:

mini_cal_body.html

Code: Select all

<style type="text/css">
<!--
   .calendar, .monthyear, .dayheaders, .days {
      width: 99.5%;
      overflow: hidden;
      margin: 0px;
      padding: 0px;
      padding-left: 0.25em;
      text-align: center;
   }
   .calendar ul {
      list-style-type: none;
   }
   .calendar li.header {
      text-align: left;
   }
   .monthyear li {
      display: block;
      height: 2em;
      width: 90%;
      font-weight: bold;
      padding-top: 2px;
   }
   .monthyear li.previous, .monthyear li.next {
      width: 5%;
   }
   ul.dayheaders {
      margin-top: 2px;
      margin-bottom: 2px;
      width: 100%;
   }
   .dayheaders li, .days li {
      display: block;
      width: 14%;
   }
   .dayheaders li {
      height: 1.5em;
      border-top: 1px solid #FFFFFF;
      border-left: 1px solid #FFFFFF;
      border-right: 1px solid #8F8F8F;
   }
   ul.days {
      margin: 0;
      width: 100%;
   }
   li.notaday, li.day {
      height: 1.5em;
   }
   li.notaday {
      padding-left: 1px;
      padding-right: 1px;
   }
   li.day {
      border-top: 1px solid #FFFFFF;
      border-left: 1px solid #FFFFFF;
      border-right: 1px solid #8F8F8F;
   }
   .calendar li.event {
      font-style: italic;
      font-weight: bold;
   }
   .monthyear li, .dayheaders li, .days li {
      float: left;
   }
   .today {
      font-weight: bold;
      background: #E5DACA;
   }

   #events div {
      list-style-type: none;
      width: 48%;
   }
   #events .header dt {
      width: 100%;
   }
   .events li {
      display: block;
      clear: both;
      padding-left: 0.1em;
   }
   .events div.noview {
      font-style: italic;
   }
   .events table {
      width: 100%;
   }
   td.date {
      width: 8em;
   }
   .events td {
      align: left;
   }
-->
</style>

<script type="text/javascript">
// <![CDATA[
   var save_background = '';

   function highlight_event(id, restore)
   {
      var element = document.getElementById(id);
      if (element)
      {
         if (restore)
         {
            element.style.background = save_background;
         } else
         {
            save_background = element.style.background;
            element.style.background = '#EBEBEB';
         }
      }
   }
// ]]>
</script>
   
<div class="forabg">
   <div class="inner">
      <span class="corners-top"><span></span></span>
      <div id="calendar">
         <div class="calendar">
            <ul class="topiclist">
               <li class="header"><dl><dt>
                  <a href="{U_MINI_CAL_CALENDAR}" class="none">{L_MINI_CAL_CALENDAR}</a>
               </dt></dl></li>
            </ul>
            <br />
            <div style="margin-top: -10px">
               <form>
               <ul class="monthyear forums">
                  <li class="previous"><a href="{U_PREV_MONTH}" title="{L_PREVIOUS_MONTH}"><img src="{T_IMAGESET_PATH}/icon_left_arrow.gif"></a></li>
                  <li>{S_MONTH_YEAR}</li>
                  <li class="next"><a href="{U_NEXT_MONTH}" title="{L_NEXT_MONTH}"><img src="{T_IMAGESET_PATH}/icon_right_arrow.gif"></a></li>
               <ul class="dayheaders">
                  <!-- BEGIN day_headers -->
                  <li class="bg3"><abbr title="{day_headers.DAY_LONG}">{day_headers.DAY_LONG}</abbr></li>
                  <!-- END day_headers -->
               </ul>
               <ul class="days">
                  <!-- BEGIN before_first_day -->
                  <li class="notaday" />
                  <!-- END before_first_day -->
                  <!-- BEGIN day_infos -->
                  <li class="{day_infos.DAY_CLASS} row day" {day_infos.DAY_OMO}>{day_infos.DAY_INFO}</li>
                  <!-- END day_infos -->
               </ul>
               </form>
            
         <div id="events" style="margin-left: 5px">
            <ul class="topiclist">
               <li class="header">
                  <h5><!-- IF HAS_EVENTS -->{L_MINI_CAL_EVENTS}<!-- ELSE -->{L_MINI_CAL_NO_EVENTS}<!-- ENDIF --></h5>
               </li>
            </ul>
            <!-- IF HAS_EVENTS -->
               <ul class="events">
                  <!-- BEGIN events -->
                  <div class="{events.EVENT_CLASS} row navbar" id="{events.EVENT_ID}" style="padding: 2px;<!-- IF events.S_ROW_COUNT is odd -->margin: 0 0 4px 0;float: left<!-- ELSE -->margin: 0 6px 4px 0;float: right<!-- ENDIF -->">
                  <table>
                     <tr>
                        <td class="date">{events.EVENT_DATE}</td>
                        <td>{events.EVENT_URLTEXT}</td>
                     </tr>
                  </table>
                  </div>
                  <!-- END events -->
               </ul>
            <!-- ENDIF -->
               </ul>
            </div>
         </div>
      </div>
      <span class="corners-bottom"><span></span></span>
   </div>
</div>

The events float left and right depending on odd or even row.
Giving you two rows of events.

This is the class that controls the space between the two rows, adjust as needed for your style.

Code: Select all

   #events div {
      list-style-type: none;
      width: 48%;
   }

Change the width: 48%; to suit your style.

[Sniper_E]

OK, and here is what I came up with for the main calendar page.

Spoiler:

calendar3_body.html

Code: Select all

<!-- INCLUDE overall_header.html -->
<style type="text/css">
<!--
   .calendar, .monthyear, .dayheaders, .days {
      width: 99.8%;
      overflow: hidden;
      margin: 0px;
      padding: 0px;
      padding-left: 0.26em;
      padding-bottom: 3px;
      text-align: center;
   }
   .calendar ul {
      list-style-type: none;
   }
   .monthyear li {
      display: block;
      height: 4%;
      width: 79%;
      font-weight: bold;
      padding-top: 2px;
   }
   .monthyear li.previous, .monthyear li.next {
      width: 5%;
   }
   ul.dayheaders {
      margin-top: 2px;
      margin-bottom: 2px;
   }
   .dayheaders li, .days li {
      width: 14%;
   }
   .dayheaders li {
      display: block;
      height: 2em;
      border-top: 1px solid #FFFFFF;
      border-left: 1px solid #FFFFFF;
      border-right: 1px solid #8F8F8F;
   }
   li.notaday, li.day {
      display: block;
      height: 9em;
   }
   li.notaday {
      padding-left: 1px;
      padding-right: 1px;
   }
   .notaday {
      vertical-align: middle;
   }
   li.day {
      border-top: 1px solid #FFFFFF;
      border-left: 1px solid #FFFFFF;
      border-right: 1px solid #8F8F8F;
   }
   .calendar li.event {
      font-style: italic;
   }
   .monthyear li, .dayheaders li, .days li {
      float: left;
   }
   .today {
      font-weight: bold;
      background: #E5DACA;
   }
   ul.event {
      display: block;
      width: 100%;
      list-style-type: none;
      padding-left: 1em;
   }
   .event li {
      width: 90%;
      text-align: left;
   }
   div.domTT {
      background-color: #CFE1F6;
      padding: 3px;
      border: 1px #FAFAFA solid;
   }
   div.domTTContent {
      font-size : 1.1em;
   }
   div.bar {
      background: url({T_IMAGESET_PATH}/event_block_bar.gif) repeat-x center center;
      text-align: right;
   }
   .bar img {
      padding-top: 1px;
   }
-->
</style>
<div class="forabg" style="margin-top: 0;">
   <div class="inner">
      <span class="corners-top"><span></span></span>
      <ul class="topiclist">
         <li class="header"><dl class="icon"><dt>&nbsp; {L_CALENDAR}</dt></dl></li>
      </ul>
      <ul class="topiclist forums">

      <div class="calendar">
         <div><form>
            <ul class="monthyear forums">
               <li class="previous"><a href="{U_PREV_YEAR}" title="{L_PREVIOUS_YEAR}"><img src="{T_IMAGESET_PATH}/icon_double_left_arrow.gif"></a></li>
               <li class="previous"><a href="{U_PREV_MONTH}" title="{L_PREVIOUS_MONTH}"><img src="{T_IMAGESET_PATH}/icon_left_arrow.gif"></a></li>
               <li>{S_MONTH_YEAR}</li>
               <li class="next"><a href="{U_NEXT_MONTH}" title="{L_NEXT_MONTH}"><img src="{T_IMAGESET_PATH}/icon_right_arrow.gif"></a></li>
               <li class="next"><a href="{U_NEXT_YEAR}" title="{L_NEXT_YEAR}"><img src="{T_IMAGESET_PATH}/icon_double_right_arrow.gif"></a></li>
            </ul>
            <ul class="dayheaders">
               <!-- BEGIN weekdays -->
               <li class="bg3" style="padding-top: 4px"><abbr title="{weekdays.WEEKDAY}">{weekdays.WEEKDAY}</abbr></li>
               <!-- END weekdays -->
            </ul>
            <ul class="days">
               <!-- BEGIN before_first_day -->
               <li class="notaday" />
               <!-- END before_first_day -->
               <!-- BEGIN day_infos -->
               <li class="{day_infos.DAY_CLASS} row day"><div class="bg3">{day_infos.DAY_INFO}</div>
                  <ul class="event">
                  
                  <!-- BEGIN date_event -->
                     <li><div class="event" onmouseover="domTT_activate(event, 'content', '{day_infos.date_event.POPUP}');">{day_infos.date_event.U_EVENT}
                        <!-- IF day_infos.date_event.DAY_BLOCK_BEGIN -->
                        <div class="bar"><img src="{T_IMAGESET_PATH}/event_block_arrow.gif" /></div>
                        <!-- ELSEIF day_infos.date_event.DAY_BLOCK_END -->
                        <div class="bar"><img src="{T_IMAGESET_PATH}/event_block_end.gif" /></div>
                        <!-- ENDIF -->
                        {day_infos.date_event.U_EVENT_END}</div>
                     </li>
                  <!-- END date_event -->
                  <!-- BEGIN date_birthday -->
                     <li>{day_infos.date_birthday.U_EVENT}</li>
                  <!-- END date_birthday -->
                     
                  </ul>
               </li>
               <!-- END day_infos -->
            </ul>
         </form></div>
      </div>
</ul>
      <span class="corners-bottom"><span></span></span>
   </div>
</div>

      <!-- IF S_DISPLAY_ONLINE_LIST -->
<br />
         <div style="float: left;margin-bottom: 8px;"><img src="{T_THEME_PATH}/images/whosonline.gif" alt="" /> &nbsp; </div>
         <h3><!-- IF U_VIEWONLINE --><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a><!-- ELSE -->{L_WHO_IS_ONLINE}<!-- ENDIF --></h3>
         <p style="margin-bottom:4px;">{TOTAL_USERS_ONLINE}<br />{LOGGED_IN_USER_LIST}<br /><br /></p>
      <!-- ENDIF -->

<!-- INCLUDE overall_footer.html -->

Hope these templates help....

[wired076]

I am trying to customise this mod in a massive way on the front page where it displays the recent calendar events. I am trying to get it to display the user who posted the thread, last user who posted, the number of replies and the name of the forum the post is in. I am also trying to get the image to work on the left hand side of this like the rest of the forum that shows whether a user has read or not read the latest post in the thread.

I have the following variables in the html file to try and display them but I need to define these correctly in the php mini_calendar.php :

Code: Select all

{events.FORUM_NAME}
{L_POST_BY_AUTHOR}{events.LAST_POST_AUTHOR_FULL}
{events.FORUM_NAME}

I tried to define

Code: Select all

'U_LAST_POST_AUTHOR'   => get_username_string('profile', $row['topic_last_poster_id'], $row['topic_last_poster_name'], $row['topic_last_poster_colour']),

within the two

Code: Select all

$template->assign_block_vars('events', array(

blocks that are in this file but it is not working.

Is anyone able to help me with this??

Once I have this working I will post up a tutorial on how to do this as I am trying to make it look similar to NV_Recent Topics which uses the board's styling.

I can't post a link to this board as it is currently on an internal test server. I can however provide screenshots of what I am trying to do if this helps.

I will greatly appreciate any help.