[TUT] - One way of Basic Calendar Responsiveness

One way of Basic Calendar Responsiveness on MyBB

ie:






Let us get started. ok, for testing purposes we need to make the forum scalable to see the calendar edits in action so we need to set viewport and remove existing container and wrapper sizing so begin by opening up the default theme headerinclude template and find:

<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />

Add this before it:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>

in global.css comment out the following for testing purposes:

#container {
/*    min-width: 990px; */
}

.wrapper {
/*    min-width: 970px; */
}

Now...,


Edit: headerinclude

1. Loading Font Awesome 5

We need to load FA5 due to the two arrows we are adding to calendar....

In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template.

Add the following after:

{$stylesheets}

External linking:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">

Internal linking:

<link rel="stylesheet" href="{$mybb->asset_url}/fontawesome5/css/all.css">

* You can download Fontawesome5 pkg stripped down for size to be used for theme includes here:
http://s000.tinyupload.com/index.php?fil...7200671326 * not the the latest version of 5

* Or you can also just download the latest Fontawesome5 web files pkg from the Font-Awesome site and strip it down for size to be used for for internal theme include:

ie: download web-specific files source: https://use.fontawesome.com/releases/v5.....2-web.zip

... and include it in similar way as suggested above. ie: download, extract, drop into a directory say called fontawesome5 and upload that directory inside theme directory then include in headerinclude template adjusting include linkage to reflect your location....


Add to global.css:

/* Basic Calendar Responsiveness Tutorial by: V */

@media (max-width:768px) {

.weekday_day_name strong {
    display: none;
}

.calendar .tcat[width*="1"] {
    padding: 1px;
}

.weekday_day_height {
    height: 0px;
}	

/* English */

[title="Sunday"]:after {
    content: 'Sun';
}

[title="Monday"]:after {
    content: 'Mon';
}

[title="Tuesday"]:after {
    content: 'Tue';
}

[title="Wednesday"]:after {
    content: 'Wed';
}

[title="Thursday"]:after {
    content: 'Thu';
}

[title="Friday"]:after {
    content: 'Fri';
}

[title="Saturday"]:after {
    content: 'Sat';
}

/* French */

[title="Dimanche"]:after {
    content: 'Dim';
}

[title="Lundi"]:after {
    content: 'Lun';
}

[title="Mardi"]:after {
    content: 'Mar';
}

[title="Mercredi"]:after {
    content: 'Mer';
}

[title="Jeudi"]:after {
    content: 'Jeu';
}

[title="Vendredi"]:after {
    content: 'Ven';
}

[title="Samedi"]:after {
    content: 'Sam';
}

/* Spanish */

[title="Domingo"]:after {
    content: 'Dom';
}

[title="Lunes"]:after {
    content: 'Lun';
}

[title="Martes"]:after {
    content: 'Mar';
}

[title="Miércoles"]:after {
    content: 'Mié';
}

[title="Jueves"]:after {
    content: 'Jue';
}

[title="Viernes"]:after {
    content: 'Vie';
}

[title="Sábado"]:after {
    content: 'Sáb';
}

/* Italian */

[title="Domenica"]:after {
    content: 'Dom';
}

[title="Lunedì"]:after {
    content: 'Lun';
}

[title="Martedì"]:after {
    content: 'Mar';
}

[title="Mercoledì"]:after {
    content: 'Merc';
}

[title="Giovedì"]:after {
    content: 'Gio';
}

[title="Venerdì"]:after {
    content: 'Ven';
}

[title="Sabato"]:after {
    content: 'Sab';
}
	
/* German */

[title="Sonntag"]:after {
    content: 'Son';
}

[title="Montag"]:after {
    content: 'Mon';
}

[title="Dienstag"]:after {
    content: 'Die';
}

[title="Mittwoch"]:after {
    content: 'Mit';
}

[title="Donnerstag"]:after {
    content: 'Don';
}

[title="Freitag"]:after {
    content: 'Fre';
}

[title="Samstag"]:after {
    content: 'Sam';
}	

/* add your additional langs here */	


}

@media (min-width:768px) {
.weekday_day_height {
    height: 100px;  
}
}

@media (max-width:800px)  {
.weekday_day_height {
    height: 60px;  
}
}

@media (max-width:600px)  {
.weekday_day_height {
    height: 50px;  
}
}

@media (max-width:480px) {
.weekday_day_height {
    height: 40px;  
}
}

@media (max-width:320px) {
.weekday_day_height {
    height: 30px;  
}
}

*ok you might note the various commented areas like:  /* English */  /* French */  /* Spanish */  /* Italian */

and ask why, ok, well we need this because what this edit does is simply find the long Weekday name and shorten it so  it will need to know that hence why if your lang is not defined already in this snippet it will need to be added below the comment /* add your additional langs here */

ok, now on to calendar related template edits....

Edit Template: calendar_weekrow_day

Find:

                <td class="trow1" style="vertical-align: top; height: 100px;">

Replace with

                <td class="{$day_class} weekday_day_height" style="vertical-align: top;">

Edit Template: calendar_weekdayheader

Replace with:

                <td class="tcat weekday_day_name" align="center" width="14%" title="{$weekday_name}"><strong>{$weekday_name}</strong></td>

Edit template: calendar



Find:

                 <td class="thead" colspan="8">
                    <div class="float_right">
                        {$prev_month_link}{$sep}{$next_month_link}
                    </div>
                    <div><strong>{$monthnames[$month]} {$year}</strong></div>
                </td>

Replace with:

                 <td class="thead" colspan="8" style="text-align: center !important;"><a href="{$prev_link}" style="float: left;"><i class="fas fa-arrow-left"></i> </a><strong>{$monthnames[$month]} {$year}</strong><a href="{$next_link}" style="float: right;"><i class="fas fa-arrow-right"></i></a></td>

Best of luck! Happy editing!      ~ V