You are here

Home » API reference » Calendar 8

calendar-day-overlap.html.twig in Calendar 8

Template to display a view as a calendar day, grouped by time with overlapping items

rows: The rendered data for this day. rows['date'] - the date for this day, formatted as YYYY-MM-DD. rows['datebox'] - the formatted datebox for this day. rows['empty'] - empty text for this day, if no items were found. rows['all_day'] - an array of formatted all day items. rows['items'] - an array of timed items for the day. rows['items'][time_period]['hour'] - the formatted hour for a time period. rows['items'][time_period]['ampm'] - the formatted ampm value, if any for a time period. rows['items'][time_period][$column]['values'] - An array of formatted items for a time period and field column.

view: The view. columns: an array of column names. min_date_formatted: The minimum date for this calendar in the format YYYY-MM-DD HH:MM:SS. max_date_formatted: The maximum date for this calendar in the format YYYY-MM-DD HH:MM:SS.

The width of the columns is dynamically set using <col></col> based on the number of columns presented. The values passed in will work to set the 'hour' column to 10% and split the remaining columns evenly over the remaining 90% of the table.

See also

template_preprocess_calendar_day.

File

templates/calendar-day-overlap.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Template to display a view as a calendar day, grouped by time with overlapping items

  5.  *

  6.  * @see template_preprocess_calendar_day.

  7.  *

  8.  * rows: The rendered data for this day.

  9.  * rows['date'] - the date for this day, formatted as YYYY-MM-DD.

  10.  * rows['datebox'] - the formatted datebox for this day.

  11.  * rows['empty'] - empty text for this day, if no items were found.

  12.  * rows['all_day'] - an array of formatted all day items.

  13.  * rows['items'] - an array of timed items for the day.

  14.  * rows['items'][time_period]['hour'] - the formatted hour for a time period.

  15.  * rows['items'][time_period]['ampm'] - the formatted ampm value, if any for a time period.

  16.  * rows['items'][time_period][$column]['values'] - An array of formatted

  17.  *   items for a time period and field column.

  18.  *

  19.  * view: The view.

  20.  * columns: an array of column names.

  21.  * min_date_formatted: The minimum date for this calendar in the format YYYY-MM-DD HH:MM:SS.

  22.  * max_date_formatted: The maximum date for this calendar in the format YYYY-MM-DD HH:MM:SS.

  23.  *

  24.  * The width of the columns is dynamically set using <col></col>

  25.  * based on the number of columns presented. The values passed in will

  26.  * work to set the 'hour' column to 10% and split the remaining columns

  27.  * evenly over the remaining 90% of the table.

  28.  *

  29.  * @ingroup themeable

  30.  */

  31. #}

  32. <div class="calendar-calendar"><div class="day-view">

  33. {# // Multi-day and all day events are not supported because Dates don't have end values

  34. <div id="multi-day-container">

  35.   <table class="full">

  36.     <tbody>

  37.       <tr class="holder">

  38.         <td class="calendar-time-holder"></td>

  39.         <td class="calendar-day-holder"></td>

  40.       </tr>

  41.       <tr>

  42.         <td class="{{ agenda_hour_class }} first">

  43.            <span class="calendar-hour">{% trans %}All day{% endtrans %}</span>

  44.         </td>

  45.         <td class="calendar-agenda-items multi-day last">

  46.           {% for column in columns %}

  47.           <div class="calendar">

  48.             <div class="inner">

  49.               {% if rows['all_day'] is not empty and rows['all_day'][column] is not empty %}

  50.                 {{ rows['all_day'][column] }}

  51.               {% else %}

  52.                 &nbsp;

  53.               {% endif %}

  54.             </div>

  55.           </div>

  56.           {% endfor %}

  57.         </td>

  58.       </tr>

  59.     </tbody>

  60.   </table>

  61. </div>

  62. 

  63. <div class="header-body-divider">&nbsp;</div>

  64. #}

  65. <div id="single-day-container">

  66.   <table class="full">

  67.     <tbody>

  68.       <tr class="holder">

  69.         <td class="calendar-time-holder"></td>

  70.         <td class="calendar-day-holder"></td>

  71.       </tr>

  72.       <tr>

  73.         <td class="first">

  74.           {% set is_first = true %}

  75.           {% for time_cnt, hour in rows['items'] %}

  76.             {% if time_cnt == 0 %}

  77.               {% set class = 'first' %}

  78.             {% elseif time_cnt == start_times|length - 1 %}

  79.               {% set class = 'last' %}

  80.             {% else %}

  81.               {% set class = '' %}

  82.             {% endif %}

  83.             <div class="{{ class }} calendar-agenda-hour">

  84.               <span class="calendar-hour">{{ hour.hour }}</span><span class="calendar-ampm">{{ hour.ampm }}</span>

  85.             </div>

  86.           {% endfor %}

  87.         </td>

  88.         <td class="last">

  89.           {% for time_cnt, hour in rows['items'] %}

  90.             {% if time_cnt == 0 %}

  91.               {% set class = 'first' %}

  92.             {% elseif time_cnt == start_times|length - 1 %}

  93.               {% set class = 'last' %}

  94.             {% else %}

  95.               {% set class = '' %}

  96.             {% endif %}

  97. 

  98.             {% for column in columns %}

  99.               <div class="{{ class }} calendar-agenda-items single-day">

  100.                 <div class="half-hour">&nbsp;</div>

  101.                 {% if is_first and hour['values'][column] %}

  102.                   <div class="calendar item-wrapper first_item">

  103.                   {% set is_first = true %}

  104.                 {% else %}

  105.                   <div class="calendar item-wrapper">

  106.                 {% endif %}

  107.                   <div class="inner">

  108.                     {% if hour['values'] is not empty and hour['values'][column] is not empty %}

  109.                       {% for item in hour['values'][column] %}

  110.                         {{ item }}

  111.                       {% endfor %}

  112.                     {% else %}

  113.                       &nbsp;

  114.                     {% endif %}

  115.                   </div>

  116.                 </div>

  117.               </div>

  118.             {% endfor %}

  119.           {% endfor %}

  120.         </td>

  121.       </tr>

  122.     </tbody>

  123.   </table>

  124. </div>

  125. <div class="single-day-footer">&nbsp;</div>

  126. </div></div>