Widget Forum

[Suu"]

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 !

[Scipion]

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

[Suu"]

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é ^^'

[Scipion]

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

[Arlem]

Bonjour

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... */
});

[Suu"]

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