Calendrier (Javascript)

[Xuno]

Bonjour, 

Je suis la fondatrice du forum et j'utilise le phbb2.
J'ai commencé à coder pour améliorer visuellement le calendrier mais je rencontre 2 petits problèmes.

Le calendrier concerné : ICI
Le calendrier qu'il est supposé de ressembler : ICI

Pour le problème des flèches qui sont à coté "Aujourd'hui", ils n'apparaissent pas.
Je pense qu'il y a une erreur dans ce script non ? 

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;
});

Ensuite, pour le mois et année qui ne devait pas s'afficher. 
Je pense qu'il a un lien avec le code précédent non ?

Xuno

[Self]

Bonjour,

Pour les flèches c'est peut-être du côté du CSS qu'il y a un problème, cependant n'ayant pas accès à votre calendrier je ne peux voir; Pourriez-vous donner l'accès au calendrier aux invités ?

Pour ce qui est du JavaScript il ne fait que de récupérer la date du jour et la stocker dans une variable sous le format "0000 : 00 : 00" mais ne l'affiche pas.

[Xuno]

Bonjour, 
J'ai autorisé l'accès du calendrier aux invités. Vous pouvez le voir par ici.

Pour le CSS

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: #E31430; }
td .dayactive a{color: #32373B !important;}
td .dayactive .mindayjs{color: #32373B !important;}
.mincalendarline th{
  background: #F5F5F5 !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: #E31430 !important;}
/* Fin MinCalendar */
/* Debut Events */

.event{
  background: #fff;
  border: 1px solid #E3E3E0;
  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: #E31430;
  font-size: 15px;
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 3px;
  padding-bottom: 3px;
}
.event_date{
  color: #b9b9b9;
}
/* Fin Events */
/* Fin Calendrier */

Dites moi s'il vous faut tout les scripts concerné au calendrier.

[Self]

Bien il a l'air de vous manquer du CSS

Comme ceci :

Code:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

Ou encore ceci :

Code:

.fa-caret-right:before {
    content: "\f0da";
}

C'est un tutoriel que vous avez suivi ? Assurez vous d'avoir bien suivi celui-ci, il vous manque aussi les événements au passage de la souris.

[Xuno]

Le problème n'est toujours pas résolu.
Regardez sur la page calendar.

Oui c'est bien un tutoriel que j'ai suivi et j'ai bien suivi jusqu'au bout :/ (Lien du tutoriel)

[Self]

Bonjour,

Le tutoriel ne semble pas complet, j'ai cependant trouvé sur la toile (internet) un petit code qui permet de faire les flèches que vous voulez.
Avant de mettre le code suivant enlevez celui que je vous ai donné dans mon précédent message:

Code:

.fa{
   border-color: transparent;
   border-style: solid;
   height: 0;
   overflow: hidden;
   display: inline-block;
   margin: 20px;
   clear: both;
}

.fa-caret-right{
   border-top-width : 7px;
   border-bottom-width : 7px;
   border-left-width : 10px;
   border-left-color : #000;
}

.fa-caret-left{
   border-top-width : 7px;
   border-bottom-width : 7px;
   border-right-width : 10px;
   border-right-color : #000;
}

Pour le JavaScript le code que vous avez n'est pas complet non plus, sur le tutoriel le code est :

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);
});

[Xuno]

Bonjour, 

J'ai mis les codes que vous m'avez passez.
Le problème ne change pas   Le mois et l'année à sélectionner est toujours là alors qu'ils ne devraient pas être là.
Je vous passe tout les scripts pour le calendrier si ça peut vous aider :

CurentDate (sur toutes les pages)

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);
});

MoisCalendrier (sur toutes les pages)

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);
});

MinDayjs (sur toutes les pages)

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');
      }
   });
});

Datejs (sur toutes les pages)

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]);
   }
  });        
});

Dayjs (sur toutes les pages)

Code:

$(document).ready(function(){
   $('.dayjs').each(function(){
      var day = $(this).text().substring(0,3);
      $(this).text(day + ".");
   });
});

Calendar_body

Code:

<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center">
   <tr>
      
   </tr>
</table>
{CALENDAR_MONTH}

Calendar_box

Code:

<!-- BEGIN _calendar_box -->
<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>
   <!-- BEGIN _cell -->
   <th width="{_calendar_box.switch_full_month._cell.WIDTH}%" align="right" nowrap="nowrap" class="dayjs">{_calendar_box._cell.L_DAY}</th>
   <!-- END _cell -->
</tr>
<!-- BEGIN _row -->
<tr>
   <!-- BEGIN _cell -->
   <!-- BEGIN switch_filled_no -->
   <td class="row3" colspan="{_calendar_box._row._cell.SPAN}" width="{_calendar_box._row._cell.WIDTH}%"> </td>
   <!-- END switch_filled_no -->
   <!-- BEGIN switch_filled -->
   <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>
            <!-- BEGIN switch_add_event_day -->
                              <a href="{_calendar_box._row._cell.switch_filled.switch_add_event_day.U_CREATE_EVENT}"><i class="fa fa-edit newevent"></i></a>
            <!-- END switch_add_event_day -->
         </td>
      </tr>
      <tr valign="top">
         <td class="row1" nowrap="nowrap">
            <table cellspacing="0" cellpadding="0" width="100%" valign="top">
            <!-- BEGIN _event -->
            <!-- BEGIN switch_event -->
            <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>
               <!-- BEGIN _more -->
               <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>
               <!-- END _more -->
               <!-- BEGIN _more_no -->
               <td></td>
               <!-- END _more_no -->
            </tr>
            <!-- END switch_event -->
            <!-- BEGIN switch_event_no -->
            <tr>
               <td class="row1"><span class="genmed"> </span></td>
               <!-- BEGIN _more -->
               <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>
               <!-- END _more -->
               <!-- BEGIN _more_no -->
               <td></td>
               <!-- END _more_no -->
            </tr>
            <!-- END switch_event_no -->
            <!-- BEGIN _more_header -->
            <tbody id="calendar_display_extend_{_calendar_box._row._cell.switch_filled.EVENT_DATE}" style="display:{_calendar_box._row._cell.switch_filled.TOGGLE_STATUS}">
            <!-- END _more_header -->
            <!-- BEGIN _more_footer -->
            </tbody>
            <!-- END _more_footer -->
            <!-- END _event -->
            </table>
         </td>
      </tr>
      </table>
   </td>
   <!-- END switch_filled -->
   <!-- END _cell -->
</tr>
<!-- END _row -->
<tr>
   <td class="catbottom" align="center" colspan="{_calendar_box.SPAN_ALL}" width="100%">
    
   <!-- BEGIN switch_add_event -->
   <form action="{S_CREATE_EVENT}" method="post"><input type="submit" value="{L_ADD_EVENT}" /></form>
   <!-- END switch_add_event -->
    
   </td>
</tr>
</table>
<!-- END _calendar_box -->

Calendar_overwiew_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_AUTHOR}:</b> {AUTHOR}<br /> -->
         <!-- BEGIN display_forum -->
         <b>{L_TOPIC_DATE}:</b> {TOPIC_DATE}<br />
         <b>{L_FORUM}:</b> {NAV_DESC}
         <!-- END display_forum -->
      </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="1" border="0" class="forumline">
      <tr>
         <td class="cat" colspan="7" align="center">
            <table cellpadding="0" cellspacing="0" border="0">
            <tr>
               <td class="quote"><b>&nbsp;<a href="{U_PREC}" class="gen">«</a>&nbsp;</b></td>
               <td width="100%" align="center">{S_MONTH}{S_YEAR}</td>
               <td class="quote"><b>&nbsp;<a href="{U_NEXT}" class="gen">»</a>&nbsp;</b></td>
            </tr>
            </table>
         </td>
      </tr>
      <tr>
         <!-- BEGIN header_cell -->
         <th width="14%">{header_cell.L_DAY}</th>
         <!-- END header_cell -->
      </tr>
      <!-- BEGIN row -->
      <tr>
         <!-- BEGIN cell -->
         <td class="{row.cell.CLASS}" align="center" height="25"><span class="gen">{row.cell.DAY}</span></td>
         <!-- END cell -->
      </tr>
      <!-- END row -->
      <tr>
         <td class="catBottom" colspan="7" align="center"><span class="genmed"><a href="{U_CALENDAR}" title="{L_CALENDAR}" class="genmed"><img src="{IMG_CALENDAR}" border="0" align="bottom" hspace="5" alt="{L_CALENDAR}" title="{L_CALENDAR}" />{L_CALENDAR}</a></span></td>
      </tr>
      </table>
   </td>
   <td><span class="gensmall">&nbsp;</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>

En espérant que ça vous éclaire un peu plus.

[Self]

Bonjour,

Ajoutez au CSS ceci :

Code:

span.hidden{
    display: none;
}

Et changez le JavaScript par :

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://gardienslegendaires.forumactif.org/calendar?start="+output);
});

[Xuno]

Parfait ! 
Je te remercie pour la patience