r01-calendar

Details

Back to Visual Areas inventory

Calendar is a Visual Area that allows you to print a monthly calendar, in which the days with events or other types of content appear highlighted, allowing access to the details of these results.
To configure the calendar, it is necessary to specify a search whose content type involved has metadata of type date.
Playing with html, css and js you can create countless different presentations.
In the edit section "settings" you can select different parameters, that allow you to vary the configuration of the Visual Area.

How to insert this Visual Area in the html of the page 
<r01-calendar id=""></r01-calendar>

				

			

		

		

			

				Data structure (JSON)
			

			

				
    

  • 

    Values
    

    The content of the data structure is dynamic: it is entered by the user.
    In the "Settings" section of the "Edit" area, you can configure it to enter different parameters:
    

      

    • MonthsBefore: How many months has to print before current month.
      • 

    • MonthsAfter: How many months has to print after current month.
      • 

    • MetadataEventStartDate: Name of the date type metadata associated with the content type that is used as the initial filter to detect the featured days of the month.
      • 

    • MetadataEventEndDate: Name of the date type metadata associated with the content type that is used as the final filter to detect the featured days of the month.
      • 

    • DayNameLength: Week days name lenght.
      • 

    

    This visual area also has a header section made up of a title (textarea) and a subtitle (HTML editor).
    

    {
  "title" : "Calendario de cursos",
  "subTitle" : "<p>Si quieres consultar, los próximos cursos diseñados, entra en el calendario</p>",
  "description" : "Programación de cursos",
  "include" : <!--#include virtual='/VA/calendar/ACCD3FF2/es/webson00-ACCD3FF2-rendered.shtml'-->
}

    

    • 

  • 

    Description of the items
    

      

    • 

      title: Title of the header section of the visual area.
      

      • 

    • 

      subTitle: Subtitle of the header section of the visual area.
      

      • 

    • 

      description: Description as text, that is used for the HTML property: ' aria-describedby'.
      

      • 

    • 

      include: Single field that inserts the calendars plain HTML.
      

      • 

    

    

    • 


				

			

		

		

			

				How to use the data structure in the html of the Visual Area
			

			

				
    

  • 

    Editable by the web designer
    

    The html is editable by the user. Through "expressions" we can model how to insert the data structure on the page.
    

    You can add Forward and Reverse controls to navegate betwen months. You should program it whith javascript.
     You should set the css styles to create any calendar design.
     You can see an example of use in the default template.
    

    <div class="va{OID}">
        <div class="wrapper">
            <p id="calendar-description">Monthly calendar of events</p>
            <span class="calendar-reverse">&LeftAngleBracket;</span>
            <span>{{{include}}}</span>
            <span class="calendar-forward">&RightAngleBracket;</span>
        </div>
     </div>
    

    •