Calendrier Forumactif

-39%

Le deal à ne pas rater :

Ordinateur portable ASUS Chromebook Vibe CX34 Flip

Nico

Messages : 179
Date d'inscription : 07/09/2010
Age : 31

Calendrier Forumactif Empty

Sujet: Calendrier Forumactif

Ven 1 Nov - 21:15

Calendrier Forumactif

Réalisé par Nico

Détails du projet

Langages: HTML & CSS / Javascript & jQuery
Progression: 90%

Bonjour à tous,

Voici un projet que j'ai réalisé pour un de mes forums en cours, il s'agit du calendrier proposé par Forumactif avec de nombreuses améliorations visuels. C'est avant tout un projet que j'ai réalisé pour pousser mes limites et essayer de voir ce qui est faisable ou non sur Forumactif.

Sommaire:

Partie HTML
Partie CSS
Partie Javascript

Voici le dit calendrier: http://series-actif.forumactif.org/calendar

Partie HTML

Le côté HTML avec la modification des templates a été relativement simple, rien de bien compliqué à force de les manipuler ça devient très vite une habitude. De plus j'ai essayé de modifier un minimum les templates (mis à part pour ajouter des ID ou des classes et pour supprimer des parties inutiles) afin de permettre aux personnes utilisant mon code de n'avoir pas ou peu besoin de passer par les templates.
J'ai tout de même modifié les templates suivants:

calendar_body
calendar_box
calendar_overview_topic
calendar_scheduler_body

calendar_body:

Code:: <table width="100%" cellspacing="2" cellpadding="0" border="0" align="center">
<tr>

</tr>
</table>
{CALENDAR_MONTH}

calendar_box:

Code:: 
<span class="hidden">{_calendar_box.S_MONTH}{_calendar_box.S_YEAR}</span>
<div class="mois"></div>
<div class="datepicker">
<a href="{_calendar_box.U_PREC}" class="gen" rel="nofollow"><i class="fa fa-caret-left"></i></a>
<a href="#" id="current">Aujourd'hui</a>
<a href="{_calendar_box.U_NEXT}" class="gen" rel="nofollow"><i class="fa fa-caret-right"></i></a>
</div>

<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" class="calendarline">
<tr>

<th width="{_calendar_box.switch_full_month._cell.WIDTH}%" align="right" nowrap="nowrap" class="dayjs">{_calendar_box._cell.L_DAY}</th>

</tr>

<tr>


<td class="row3" colspan="{_calendar_box._row._cell.SPAN}" width="{_calendar_box._row._cell.WIDTH}%"> </td>


<td class="row1" valign="top" colspan="{_calendar_box._row._cell.SPAN}" width="{_calendar_box._row._cell.WIDTH}%">
   <table cellspacing="0" cellpadding="0" width="100%" height="94" valign="top">
   <tr>
      <td class="row2 calendarbox" align="center" height="4" nowrap="nowrap">
         <span class="genmed datejs">{_calendar_box._row._cell.U_DATE}</span>
         
  <a href="{_calendar_box._row._cell.switch_filled.switch_add_event_day.U_CREATE_EVENT}"><i class="fa fa-edit newevent"></i></a>
         
      </td>
   </tr>
   <tr valign="top">
      <td class="row1" nowrap="nowrap">
         <table cellspacing="0" cellpadding="0" width="100%" valign="top">
         
         
         <tr>
            <td class="row1" nowrap="nowrap" align="left"><div class="genmed event">{_calendar_box._row._cell.switch_filled._event.switch_event.EVENT_TYPE}<a rel="nofollow" href="{_calendar_box._row._cell.switch_filled._event.switch_event.U_EVENT}" {_calendar_box._row._cell.switch_filled._event.switch_event.OVERVIEW_MESSAGE} class="{_calendar_box._row._cell.switch_filled._event.switch_event.EVENT_CLASS}" style="font-style:normal;font-weight:normal;">{_calendar_box._row._cell.switch_filled._event.switch_event.EVENT_TITLE}</a></div></td>
            
            <td class="row1" align="right"><span class="genmed"><a href="#" onClick="hdr_toggle('calendar_display_extend_{_calendar_box._row._cell.switch_filled.EVENT_DATE}','calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}', '{DOWN_ARROW}', '{UP_ARROW}'); return false;" class="gensmall">...<img src="{_calendar_box._row._cell.switch_filled.TOGGLE_ICON}" id="calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}" hspace="2" border="0" /></a></span></td>
            
            
            <td></td>
            
         </tr>
         
         
         <tr>
            <td class="row1"><span class="genmed"> </span></td>
            
            <td class="row1" align="right"><span class="genmed"><a href="#" onClick="hdr_toggle('calendar_display_extend_{_calendar_box._row._cell.switch_filled.EVENT_DATE}','calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}', '{DOWN_ARROW}', '{UP_ARROW}'); return false;" class="gensmall">...<img src="{_calendar_box._row._cell.switch_filled.TOGGLE_ICON}" id="calendar_open_close_{_calendar_box._row._cell.switch_filled.EVENT_DATE}" hspace="2" border="0" /></a></span></td>
            
            
            <td></td>
            
         </tr>
         
         
         <tbody id="calendar_display_extend_{_calendar_box._row._cell.switch_filled.EVENT_DATE}" style="display:{_calendar_box._row._cell.switch_filled.TOGGLE_STATUS}">
         
         
         </tbody>
         
         
         </table>
      </td>
   </tr>
   </table>
</td>


</tr>

<tr>
<td class="catbottom" align="center" colspan="{_calendar_box.SPAN_ALL}" width="100%">


<form action="{S_CREATE_EVENT}" method="post"><input type="submit" value="{L_ADD_EVENT}" /></form>


</td>
</tr>
</table>

calendar_overview_topic:

Code:: <table border="0" width="100%" class="eventline">
<tr>
<td><div class="event_title">{TOPIC_TITLE}</div></td>
</tr>
<tr>
<td>
   <span class="gensmall">
<div class="event_date">{CALENDAR_EVENT}</div>
      
      
      <b>{L_TOPIC_DATE}:</b> {TOPIC_DATE}<br />
      <b>{L_FORUM}:</b> {NAV_DESC}
      
   </span>
</td>
</tr>
<tr>
<td>
   <table width="100%"border="0">
   <tr>
      <td>
         <span class="genmed">{MESSAGE}</span>
      </td>
   </tr>
   </table>
</td>
</tr>
</table>

calendar_scheduler_body:

Code:: <form name="_calendar_scheduler" method="post" action="{ACTION}">
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center">
<tr>
<td valign="middle" class="nav" width="100%"><span class="nav"><a href="{U_INDEX}" class="nav">{L_INDEX}</a>{NAV_SEPARATOR}<a href="{U_CALENDAR_SCHEDULER}" class="nav">{L_CALENDAR_SCHEDULER}</a></span></td>
<td align="right" valign="bottom" nowrap="nowrap"><span class="gensmall"><b>{PAGINATION}</b></span></td>
</tr>
</table>

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td colspan="3">
   <table border="0" cellpadding="4" cellspacing="1" width="100%" class="forumline">
   <tr>
   </tr>
   </table>
   <br style="font-size:5;" />
</td>
</tr>
<tr>
<td valign="top">
   <table cellpadding="0" cellspacing="0" border="0" class="forumline mincalendarline">
   <tr>
      <td class="cat" colspan="7" align="center">
<a href="{U_PREC}"><i class="fa fa-caret-left"></i></a>
{S_MONTH}<span class="hidden">{S_YEAR}</span>
<a href="{U_NEXT}"><i class="fa fa-caret-right"></i></a>
      </td>
   </tr>
   <tr>
      
      <th width="14%">{header_cell.L_DAY}</th>
      
   </tr>
   
   <tr>
      
      <td class="{row.cell.CLASS}" align="center" height="25"><span class="gen mindayjs">{row.cell.DAY}</span></td>
      
   </tr>
   
   </table>
</td>
<td><span class="gensmall"> </span></td>
<td valign="top" width="100%">
   {TOPIC_LIST_SCHEDULER}
   <div align="right"><span class="gensmall"><b>{PAGINATION}</b></span></div>
   {ESPACE}
   {BIRTHDAY_LIST_SCHEDULER}
</td>
</tr>
</table>

<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center">
<tr>
<td align="right" valign="bottom" nowrap="nowrap">{S_HIDDEN_FIELDS}</td>
</tr>
</table>
</form>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">{JUMPBOX}</td>
</tr>
</table>

Partie CSS

Le CSS reste relativement court, j'ai essayé de m'habituer aux nouveaux selecteur CSS: first:child et last:child afin de réaliser des visuels plus précis. Je n'ai pas encore réussi à réaliser exactement ce que je voulais d'où la progression à 90%. Je rencontre quelques problèmes dû aux nombreux tableaux dans les tableaux que génère Forumactif ...

Code:: /* Debut Calendrier */

.datejs{
float:right;
}
.datepicker{
float:left;
margin-top: 10px;
font-size: 14px;
border: 1px solid #d1d2d5;
border-radius: 5px;
padding: 5px;
}
.datepicker i{
font-size: 16px;
margin: 0px 5px;
}
.mois{
float: right;
font-size: 22px;
margin: 10px 0px;
}
#current{
border-left: 1px solid #d1d2d5;
border-right: 1px solid #d1d2d5;
padding: 0px 5px;
}
.calendarline td{
padding: 5px;
}
.calendarbox{
border-top: 1px solid #d1d2d5;
}
/* Debut MinCalendar */

td .dayactive{background: #00ce9b; }
td .dayactive a{color: #fafafb !important;}
td .dayactive .mindayjs{color: #fafafb !important;}

.mincalendarline th{
background: #e5e6e6 !important;
color: #5c5d5f !important;
font-size: 11px;
}
.mincalendarline tr:first-child td{border-radius: 5px 5px 0 0;}
.mincalendarline tr:first-child td a{color: #FFF !important;}
.mincalendarline tr:first-child td a:hover{color: #00ce9b !important;}

/* Fin MinCalendar */
/* Debut Events */

.event{
background: #e3f1ed;
border: 1px solid #b7dbd1;
border-radius: 3px;
padding: 3px;
margin-top: -7px;
width: 100%;
}
.newevent{float: left;}
.eventline{
background: #fdfdfd;
min-width: 150px;
border: 1px solid #d9d9d9;
border-radius: 5px;
box-shadow: 1px 2px 10px #b5b5b5;
color: #4b4b4b;
}
.event_title{
color: #00ce9b;
font-size: 15px;
border-bottom: 1px solid #dbdbdb;
margin-bottom: 3px;
padding-bottom: 3px;
}
.event_date{
color: #b9b9b9;
}
/* Fin Events */
/* Fin Calendrier */

Partie Javascript

On en arrive à la partie un peu confuse du code. Etant encore débutant en Javascript j'ai essayé de faire comme je pouvais, c'est parfois très barbare et il y quelque codes que j'ai récupéré sur le net pour des fonctions un peu plus complexes (peut être pas présente dans le calendrier en faite).

CurrentDate : Cette fonction me permet de récupérer la date du jour afin de réaliser le bouton "Aujourd'hui" qui ramène l'utilisateur au calendrier du mois en cours.

Code:

$(document).ready(function(){
var d = new Date();

var month = d.getMonth()+1;
var day = d.getDate();

var output = d.getFullYear() +
((''+month).length<2 ? '0' : '') + month +
((''+day).length<2 ? '0' : '') + day;

$("#current").attr("href", "http://series-actif.forumactif.org/calendar?start="+output);
});
DayJs : Cette fonction un peu inutile mais me permettant d'obtenir exactement le rendu souhaité, permet de transformer "Lundi" en "Lun." et ainsi de suite pour les autres jours dans l'entête du calendrier.

Code:

$(document).ready(function(){
$('.dayjs').each(function(){
var day = $(this).text().substring(0,3);
$(this).text(day + ".");
});
});
DateJs : Cette fonction a servi à transformer le texte dans chacune des cases du calendrier. De base il y avait "Lun 04 Novembre 2013" pour chacunes des cases ça commence à faire lourd et pénible à lire. J'ai donc réduis au numéro du jour. J'ai eu de l'aide sur le forum de Forumactif pour ce code qui me posait problème au début.

Code:

$(document).ready(function(){
$('.datejs').each(function() {
var arr = $(this).text().split(' ');
var arr2 = arr[1].split('');
if(arr2[0] == 0){
$(this).text(arr2[1]);
}
else{
$(this).text(arr[1]);
}
});
});
MinDayJs : On se retrouve sur le petit calendrier ici, celui sur lequel on atterri quand on dispose de plusieurs évènements sur un jour. Il me sert uniquement à donner un style à la case du jour correspondant à la date d'aujourd'hui.
http://series-actif.forumactif.org/calendar_scheduler.forum?d=1383260400&fid=&display=events

Code:

$(document).ready(function(){
var d = new Date();
var dayactive = d.getDate();
var month = d.getMonth()+1;
var year = d.getFullYear();

var currentdate = dayactive + " " + month + " " + year;

$('.mindayjs').each(function(){
   var day = $(this).text();
   var mois = $('select[name=start_month]').find(":selected").val();
   var annee = $('select[name=start_year]').find(":selected").val();
   var date = day + " " + mois + " " + annee;

   if(date == currentdate){
      $(this).parent().addClass('dayactive');
   }
});
});
MoisCalendrier : Permet d'obtenir le mois et l'année du calendrier que l'on consulte. Il s'agit du texte qui se trouve en haut à droite du calendrier sur l'exemple.

Code:

$(document).ready(function(){
var mois = $('select[name=start_month]').find(":selected").text();
var annee = $('select[name=start_year]').find(":selected").text();

$('.mois').text(mois + " " + annee);
});

Xuno

Messages : 1
Date d'inscription : 30/07/2014

Calendrier Forumactif Empty

Sujet: Re: Calendrier Forumactif Mer 30 Juil - 20:50

Bonjour, J'ai suivi à la lettre de votre sujet. Je rencontre 2 petits problèmes. Vous pouvez le voir ici : http://gardienslegendaires.forumactif.org/calendar J'ai pas les flèches sur les cotés "d'aujourd'hui". Et J'ai 2 encadrés de date (mois et année), alors quand dans votre démo, il a que aujourd'hui. Merci d'avance de votre aide. Cordialement

Page 1 sur 1

Vous n'êtes pas autorisés à poster ici.

Retourner en haut
L'art du développement web est quelque chose de magnifique qui se doit d'être partagé aux autres afin de participer au développement de nombreux projets riches et innovants sur le web et ce même au niveau de Forumactif. Passionnés du web nous nous engageons à partager tout notre savoir dans des tutoriels de qualité pour que vous deveniez à l'aise avec internet et avec votre ordinateur.		Messages Sujets Membres
© Lemonsky 2013 - Développé par Brock. Thème inspiré par Grafikart.