Widget Forum

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Widget Forum

Message par Suu" Lun 15 Avr 2013 - 13:25

Cucuw les gens !

Alors voila, j'ai activée le Widget " calendrier" Sur mon Forum. Et un membre ma demandée si était possible de mettre le jour " actuel" en gras, rouge, enfin visible en gros.

Je ne sais pas si je suis très clair . Mais en gros il voudrai savoir si c'est possible de mettre en évidence tout les jour, la date du jours actuel. ( Oula c'est encore plus complexe que la phrase d'avant >< )

Pouvez vous m'éclairer sur le sujet ? Si vous avez compris mon explication fort explicite ! Yes


Dernière édition par Suu" le Mar 16 Avr 2013 - 20:40, édité 1 fois
Suu

Suu"
**

Féminin
Messages : 61
Inscrit(e) le : 05/03/2013

http://imagine.forumactif.org/
Suu" a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Forum

Message par Scipion Lun 15 Avr 2013 - 13:59

Bonjour

Le calendrier que vous avez activé est un widget prédéfini donc non modifiable. Toutefois, vous avez la possibilité de créer un nouveau widget personnalisé 'Calendrier' avec ce code :

Code:
<script>

setCal()

function getTime() {

var now = new Date()
var hour = now.getHours()
var minute = now.getMinutes()
now = null
var ampm = ""


if (hour >= 12) {
hour -= 12
ampm = ""
} else
ampm = ""
hour = (hour == 0) ? 12 : hour


if (minute < 10)
minute = "0" + minute


return hour + ":" + minute + " " + ampm
}

function leapYear(year) {
if (year % 4 == 0)
return true //
/* else */ // else not needed when statement is "return"
return false //
}

function getDays(month, year) {
//
var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28
ar[2] = 31
ar[3] = 30
ar[4] = 31
ar[5] = 30
ar[6] = 31
ar[7] = 31
ar[8] = 30
ar[9] = 31
ar[10] = 30
ar[11] = 31

//
return ar[month]
}

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array(12)
ar[0] = "Janvier"
ar[1] = "Fevrier"
ar[2] = "Mars"
ar[3] = "Avril"
ar[4] = "Mai"
ar[5] = "Juin"
ar[6] = "Juillet"
ar[7] = "Aout"
ar[8] = "Septembre"
ar[9] = "Octobre"
ar[10] = "Novembre"
ar[11] = "Decembre"

//
return ar[month]
}

function setCal() {
// standard time attributes
var now = new Date()
var year = now.getYear()
if (year < 1000)
year+=1900
var month = now.getMonth()
var monthName = getMonthName(month)
var date = now.getDate()
now = null


var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null


var days = getDays(month, year)


drawCal(firstDay + 1, days, date, monthName, year)
}

function drawCal(firstDay, lastDate, date, monthName, year) {

var headerHeight = 50
var border = 2
var cellspacing = 4
var headerColor = "midnightblue"
var headerSize = "+3"
var colWidth = 60
var dayCellHeight = 25
var dayColor = "darkblue"
var cellHeight = 40
var todayColor = "red"
var timeColor = "blue"


var text = ""
text += '<CENTER>'
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>'
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'
text += monthName + ' ' + year
text += '</FONT>'
text += '</TH>'


var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
openCol += '<FONT COLOR="' + dayColor + '">'
var closeCol = '</FONT></TD>'


var weekDay = new Array(7)
weekDay[0] = "Dim"
weekDay[1] = "Lun"
weekDay[2] = "Mar"
weekDay[3] = "Mer"
weekDay[4] = "Jeu"
weekDay[5] = "Ven"
weekDay[6] = "Sam"


text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol
}
text += '</TR>'


var digit = 1
var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (digit == date) {
text += '<TD HEIGHT=' + cellHeight + '>'
text += '<FONT COLOR="' + todayColor + '">'
text += digit
text += '</FONT><BR>'
text += '<FONT COLOR="' + timeColor + '" SIZE=2>'
text += '<CENTER>' + getTime() + '</CENTER>'
text += '</FONT>'
text += '</TD>'
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}


text += '</TABLE>'
text += '</CENTER>'


document.write(text)
}
</script>
Après création et installation, il vous appartiendra d'apprécier si le nouveau widget répond à votre attente ou non.

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Forum

Message par Suu" Mar 16 Avr 2013 - 14:21

Merci ! C'est ça que je voudrai mais sans l'heure et nettement plus petit, Comme le CSS du Widget de base avec juste la case rougé sur le jour d'aujourd'hui.

Et comme je suis pas très douée en code script je ne sais pas quoi modifier dans le script que vous m'avez donné ^^'
Suu

Suu"
**

Féminin
Messages : 61
Inscrit(e) le : 05/03/2013

http://imagine.forumactif.org/
Suu" a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Forum

Message par Scipion Mar 16 Avr 2013 - 16:18

La modification de ce script a des limites, par exemple la suppression de l'heure est impossible à obtenir. Donc voilà ce que j'ai pu faire :

Code:
<script>
 
setCal()
 
function getTime() {
 
var now = new Date()
var hour = now.getHours()
var minute = now.getMinutes()
now = null
var ampm = ""
 
 
if (hour >= 12) {
hour -= 12
ampm = ""
} else
ampm = ""
hour = (hour == 0) ? 12 : hour
 
 
if (minute < 10)
minute = "0" + minute
 
 
return hour + ":" + minute + " " + ampm
}
 
function leapYear(year) {
if (year % 4 == 0)
return true //
/* else */ // else not needed when statement is "return"
return false //
}
 
function getDays(month, year) {
//
var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28
ar[2] = 31
ar[3] = 30
ar[4] = 31
ar[5] = 30
ar[6] = 31
ar[7] = 31
ar[8] = 30
ar[9] = 31
ar[10] = 30
ar[11] = 31
 
//
return ar[month]
}
 
function getMonthName(month) {
// create array to hold name of each month
var ar = new Array(12)
ar[0] = "Janvier"
ar[1] = "Fevrier"
ar[2] = "Mars"
ar[3] = "Avril"
ar[4] = "Mai"
ar[5] = "Juin"
ar[6] = "Juillet"
ar[7] = "Aout"
ar[8] = "Septembre"
ar[9] = "Octobre"
ar[10] = "Novembre"
ar[11] = "Decembre"
 
//
return ar[month]
}
 
function setCal() {
// standard time attributes
var now = new Date()
var year = now.getYear()
if (year < 1000)
year+=1900
var month = now.getMonth()
var monthName = getMonthName(month)
var date = now.getDate()
now = null
 
 
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null
 
 
var days = getDays(month, year)
 
 
drawCal(firstDay + 1, days, date, monthName, year)
}
 
function drawCal(firstDay, lastDate, date, monthName, year) {
 
var headerHeight = 40
var border = 1
var cellspacing = 0
var headerColor = "midnightblue"
var headerSize = "+1"
var colWidth = 20
var dayCellHeight = 20
var dayColor = "darkblue"
var cellHeight = 20
var todayColor = "red"
var timeColor = "blue"
 
 
var text = ""
text += '<CENTER>'
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>'
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'
text += monthName + ' ' + year
text += '</FONT>'
text += '</TH>'
 
 
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
openCol += '<FONT COLOR="' + dayColor + '">'
var closeCol = '</FONT></TD>'
 
 
var weekDay = new Array(7)
weekDay[0] = "Dim"
weekDay[1] = "Lun"
weekDay[2] = "Mar"
weekDay[3] = "Mer"
weekDay[4] = "Jeu"
weekDay[5] = "Ven"
weekDay[6] = "Sam"
 
 
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol
}
text += '</TR>'
 
 
var digit = 1
var curCell = 1
 
for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (digit == date) {
text += '<TD HEIGHT=' + cellHeight + '>'
text += '<FONT COLOR="' + todayColor + '">'
text += digit
text += '</FONT><BR>'
text += '<FONT COLOR="' + timeColor + '" SIZE=1>'
text += '<CENTER>' + getTime() + '</CENTER>'
text += '</FONT>'
text += '</TD>'
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}
 
 
text += '</TABLE>'
text += '</CENTER>'
 
 
document.write(text)
}
</script>
Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Forum

Message par Arlem Mar 16 Avr 2013 - 16:25

Bonjour Smile

Deux solutions :
En gardant le code proposé par Scipion, sans l'affichage de l'heure :
Code:
<script>
setCal()
function leapYear(year) {
   if (year % 4 == 0)
   return true //
   /* else */
   // else not needed when statement is "return"
   return false //
}
function getDays(month, year) {
   //
   var ar = new Array(12)
   ar[0] = 31 // January
   ar[1] = (leapYear(year)) ? 29 : 28
   ar[2] = 31
   ar[3] = 30
   ar[4] = 31
   ar[5] = 30
   ar[6] = 31
   ar[7] = 31
   ar[8] = 30
   ar[9] = 31
   ar[10] = 30
   ar[11] = 31
   //
   return ar[month]
}
function getMonthName(month) {
   // create array to hold name of each month
   var ar = new Array(12)
   ar[0] = "Janvier"
   ar[1] = "Fevrier"
   ar[2] = "Mars"
   ar[3] = "Avril"
   ar[4] = "Mai"
   ar[5] = "Juin"
   ar[6] = "Juillet"
   ar[7] = "Aout"
   ar[8] = "Septembre"
   ar[9] = "Octobre"
   ar[10] = "Novembre"
   ar[11] = "Decembre"
   //
   return ar[month]
}
function setCal() {
   // standard time attributes
   var now = new Date()
   var year = now.getYear()
   if (year < 1000)
   year+=1900
   var month = now.getMonth()
   var monthName = getMonthName(month)
   var date = now.getDate()
   now = null
   var firstDayInstance = new Date(year, month, 1)
   var firstDay = firstDayInstance.getDay()
   firstDayInstance = null
   var days = getDays(month, year)
   drawCal(firstDay + 1, days, date, monthName, year)
}
function drawCal(firstDay, lastDate, date, monthName, year) {
   var headerHeight = 40
   var border = 1
   var cellspacing = 0
   var headerColor = "midnightblue"
   var headerSize = "+1"
   var colWidth = 20
   var dayCellHeight = 20
   var dayColor = "darkblue"
   var cellHeight = 20
   var todayColor = "red"
   var timeColor = "blue"
   var text = ""
   text += '<CENTER>'
   text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'
   text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>'
   text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'
   text += monthName + ' ' + year
   text += '</FONT>'
   text += '</TH>'
   var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
   openCol += '<FONT COLOR="' + dayColor + '">'
   var closeCol = '</FONT></TD>'
   var weekDay = new Array(7)
   weekDay[0] = "Dim"
   weekDay[1] = "Lun"
   weekDay[2] = "Mar"
   weekDay[3] = "Mer"
   weekDay[4] = "Jeu"
   weekDay[5] = "Ven"
   weekDay[6] = "Sam"
   text += '<TR ALIGN="center" VALIGN="center">'
   for (var dayNum = 0; dayNum < 7; ++dayNum) {
      text += openCol + weekDay[dayNum] + closeCol
   }
   text += '</TR>'
   var digit = 1
   var curCell = 1
   for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
      text += '<TR ALIGN="right" VALIGN="top">'
      for (var col = 1; col <= 7; ++col) {
         if (digit > lastDate)
         break
         if (curCell < firstDay) {
            text += '<TD></TD>';
            curCell++
         } else {
            if (digit == date) {
               text += '<TD HEIGHT=' + cellHeight + '>'
               text += '<FONT COLOR="' + todayColor + '">'
               text += digit
               text += '</FONT><BR>'
               text += '</TD>'
            } else
            text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
            digit++
         }
      }
      text += '</TR>'
   }
   text += '</TABLE>'
   text += '</CENTER>'
   document.write(text)
}
</script>

En utilisant le calendrier de FA, il suffit de rajouter ça dans la gestion des codes javascript, actif sur toutes les pages :
Code:
var now = new Date();
var date = now.getDate();
$(function() {
    $('#calendar_container').find('.gen:contains('+date+')').css('color','#EF0317'); /* on peut aussi mettre en gras, changer la couleur de fond... */
});
avatar

Arlem
Membre actif

Messages : 2550
Inscrit(e) le : 30/06/2009

Arlem a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Forum

Message par Suu" Mar 16 Avr 2013 - 20:40

Merci bien vous deux ! J'ai choisit la solution de facilité x) C'est a dire le deuxième script de Arlem merci
Suu

Suu"
**

Féminin
Messages : 61
Inscrit(e) le : 05/03/2013

http://imagine.forumactif.org/
Suu" a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum