Calendrier agenda.
Calendrier agenda. - HTML/CSS - Programmation
Marsh Posté le 20-01-2010 à 17:07:50
perso je te conseille de ne pas réinventer la roue et de te baser sur des trucs tout faits genre jquery ui calendar.
avec qques lignes de codes, genre ca:
Code :
|
tu peux faire des trucs bien très rapidement (en l'occurence dans cet exemple je grise les samedi et les dimanches).
cherche sur glouglou avec les mots clés jquery+ui+calendar et particulièrement la méthode beforeShowDay qui va te permettre de dire en fonction d'une date comment elle devra être affichée (en renvoyant false ou true pour rendre cliquable ou non, et une classe css pour définir l'affichage)
++
Message édité par pataluc le 20-01-2010 à 17:08:33
Marsh Posté le 25-02-2010 à 10:23:58
Bonjour,
Avez-vous réussi ?
Je souhaiterai faire la même chose.
Changer l'aspect comme la couleur des W-E, etc. ne me semble pas impossible à trouver.
Par contre je n'ai aucune idée du code à insérer pour intégrer un évènement.
J'imagine que ça doit avoir l'air dans la dernière section de qch du genre :
if ("la date de l'évènement" )
eval("sp"+ii).style.backgroundColor="couleur évènement"
}
Il faudra également changer la section :
text += "</tr>"
aa = 0
for (kk=0;kk<=5;kk++){
text += "<tr>"
for (ii=0;ii<=6;ii++){
text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)[/#ff0000]'>1</span></td>"
aa += 1
}
afin d'appeler le texte de l'évènement.
Comment faire ???
Ca fait un moment que je cherche en vain un calendrier avec évènements sans PHP (non-modifiable en ligne, comme kod je souhaite le modifier moi même).
Ca doit bien éxister.
HELP au pro !
Pataluc, ton code n'est absolument pas modifiable, comment intègres tu un évènement?
(En plus ton calendrier est en anglais ...)
Merci pour votre aide.
Marsh Posté le 25-02-2010 à 10:55:55
comment ca, "pas modifiable"?
pour ajouter un évènement, tu crée une nouvelle classe css et tu l'affecte à une date dans le beforeShowDay...
EDIT: ca peut donner ca, avec un évenement le 22/02:
Code :
|
pour la langue, voir du coté de http://jqueryui.com/demos/datepicker/#localization
Message édité par pataluc le 25-02-2010 à 11:21:24
Marsh Posté le 26-02-2010 à 02:25:40
Une fois j'en avais modifié un d'une source pour faire qqc de pas trop mal :
Tu peux le pomper ici : http://seb1k.free.fr/FTP/calendrierJS.html
Tout est en 1 seul fichier html (CSS, JS), apres tu lis la source et tu l'adapte 
Message édité par GordonF_69 le 26-02-2010 à 02:27:08
Marsh Posté le 08-03-2010 à 14:50:26
pataluc,
ton code à l'air simple et efficace effectivement. De plus les skins sont vraiment sympas. J'ai été voir sur leur site mais hélàs tout est en anglais ! :-(
Alors peux-tu encore une fois éclairer ma lanterne stp.
- est-il possible d'avoir un affichage permanent du calendrier,
- je n'arrive toujours pas à programmer une autre date, peux tu intégrer dans ton exemple une deuxième date,
- est-il possible d'associer du texte, (image, etc...) à chaque évènement qui apparaitrai "onclick" sur une date évènement ?
J'espère avoir était clair.
Merci d'avance.
Webmastom
Marsh Posté le 08-03-2010 à 16:08:20
| webmastom a écrit : pataluc, |
quand tu dis "affichage permanent", en fait tu veux afficher un calendrier sur ta page et pas qu'il serve à une saisie de date? ce n'est pas le but de ce composant mais faut voir si c'est faisable...
pour intégrer une seconde date, de manière assez crade on pourrait mettre:
Code :
|
juste après la ligne 30.
je suis pas sur de saisir ton 3eme point... peux-tu expliquer ton problème de manière plus globale (quel est le but de ce calendrier) parce que du coup avec ce que tu dis j'ai l'impression qu'on ne va pas forcément dans la bonne direction...
Message édité par pataluc le 08-03-2010 à 16:09:31
Marsh Posté le 09-03-2010 à 11:21:35
oui. par affichage permanent, j'entend effectivement sans saisie de date. En fait je voudrai un calendrier évènementiel.
J'aimerai pour mon site de plongée, (www.gcobplongee.com), avoir un calendrier que je mettrai moi même à jour régulièrement qui afficherai les dates avec des évènements comme dans ta démo. Mais il faudrait pouvoir rajouter le descriptif de l'évènement... Actuellement, avec ce codage un évènement est juste une date mise en valeur par une couleur. Il faudrait en plus que je puisse y associer du texte. Pour que ce soit plus clair voici un vulgaire ex:
http://grenet.thomas.free.fr/pages/essai.htm
Ce genre de code éxiste de mille façon mais en PHP ! Je cherche depuis des mois l'équivalent pour un evironnement statique et sans que personne ait la main dessus à part moi via le code source.
Est-ce possible ?
Peux-tu m'aider ?
Marsh Posté le 09-03-2010 à 15:08:12
pourquoi ne veux tu pas de php? je suis sur que tu dois avoir des trucs très bien faits en php...
sinon en javascript on doit pouvoir arriver à la même chose, mais peut être pas avec la même base...
Marsh Posté le 09-03-2010 à 15:18:32
| webmastom a écrit : oui. par affichage permanent, j'entend effectivement sans saisie de date. En fait je voudrai un calendrier évènementiel. |
L'exemple du lien, il n'est pas en php, mais en js.
J'ai lu et relu tes messages, mais je vois pas vraiment ce que tu veux. Tu veux quelque chose comme sur HFR (http://www.hardware.fr/news/lire/08-03-2010/) ? Ou plutôt comme dans le lien que tu as posté ?
---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Marsh Posté le 09-03-2010 à 16:20:54
kao98 : oui comme sur HFR mais avec une naviguation permettant de se projeter les mois à venir et à part que dans cet exemple chaque date à l'air d'appeller une nouvelle page :-( ... pas super.
pataluc : je ne souhaite pas du php car je n'y connait absolument rien. De tuote façon, la seule chose que je pense avoir compris c'est que le php pour fonctionner nécessite un hébergement dynamique non ? Or, je suis en statique.
| Citation : sinon en javascript on doit pouvoir arriver à la même chose, mais peut être pas avec la même base... |
Où ça ? Là est ma question ^^.
Message édité par webmastom le 09-03-2010 à 16:26:11
Marsh Posté le 09-03-2010 à 16:35:43
| webmastom a écrit : pataluc : je ne souhaite pas du php car je n'y connait absolument rien. De tuote façon, la seule chose que je pense avoir compris c'est que le php pour fonctionner nécessite un hébergement dynamique non ? Or, je suis en statique. |
tu as l'air d'être chez free... donc tu as php par défaut... m'enfin c'est ton choix.
regarde de ce coté: http://arshaw.com/fullcalendar/ cela semble être ce que tu cherches.
Marsh Posté le 09-03-2010 à 16:39:44
| pataluc a écrit : tu as l'air d'être chez free... donc tu as php par défaut... m'enfin c'est ton choix. |
Oui chez free pour mon site perso OK; mais là c'est pour le site de mon association sportive ^^ www.gcobplongee.com.
Merci beaucoup pour ton aide et pour le lien je vais chercher de ce côté alors.
Marsh Posté le 09-03-2010 à 16:54:21
SUPER merci mille fois pour ton lien, c'est parfait !
Je n'ai plus qu'à le mettre à ma sauce.
Encore merci pour l'aide.
Sujets relatifs:
- [Outlook 2003] formulaire => affichage d'un calendrier pour champ date
- script calendrier multiutilisateur
- [PHP] Quel CMS avec module de calendrier utiliser ?
- Syncronisatoin calendrier outlook VBA
- Utilisation de Google Agenda dans application Web
- [PHP/JAVA] Calendrier avec menu avec choix booléen sur chaque jour
- [JS] recherche calendrier javascript style thunderbird
- Script calendrier/annonce d'évenements
- [C#] Calendrier journalier / Agenda
- [PHP] Agenda - Calendrier online
Marsh Posté le 20-01-2010 à 16:41:54
Bonjour,
je suis en train de creer une page perso sur laquellle j'aimerai integrer un calendrier agenda.
Je m'explique: c'est un calendrier sur lequel certains jours (la case) seront grisé pour signaler un evenement ce jour précis.
Le jour actuel sera signalé d'une autre couleur.
J'ai trouvé un script mais je n'arrive pas a le modifier.
<HEAD>
<style type="text/css">
<!--
span.label {color:black;width:60;height:30;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c1 {cursor:hand;color:black;width:60;height:30;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c2 {cursor:hand;color:red;width:60;height:30;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c3 {cursor:hand;color:#b0b0b0;width:60;height:30;text-align:center;margin-top:0;background:#ffF;font:bold 12px Arial}
-->
</style>
<script type="text/javascript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function maxDays(mm, yyyy){
var mDay;
if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
mDay = 30;
}
else{
mDay = 31
if(mm == 1){
if (yyyy/4 - parseInt(yyyy/4) != 0){
mDay = 28
}
else{
mDay = 29
}
}
}
return mDay;
}
function changeBg(id){
if (eval(id).style.backgroundColor != "yellow" ){
eval(id).style.backgroundColor = "yellow"
}
else{
eval(id).style.backgroundColor = "#ffffff"
}
}
function writeCalendar(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var arrM = new Array("Janvier","Fevrier","Mars","Avril","Mai","Juin","Jeuillet","Aout","Septembre","Octobre","Novembre","Decembre" )
var arrY = new Array()
for (ii=0;ii<=4;ii++){
arrY[ii] = yyyy - 2 + ii
}
var arrD = new Array("Dim","Lun","Mar","Mer","Jeu","Ven","Sam" )
var text = ""
text = "<form name=calForm>"
text += "<table border=1>"
text += "<tr><td>"
text += "<table width=100%><tr>"
text += "<td align=left>"
text += "<select name=selMonth onChange='changeCal()'>"
for (ii=0;ii<=11;ii++){
if (ii==mm){
text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>"
}
else{
text += "<option value= " + ii + ">" + arrM[ii] + "</option>"
}
}
text += "</select>"
text += "</td>"
text += "<td align=right>"
text += "<select name=selYear onChange='changeCal()'>"
for (ii=0;ii<=4;ii++){
if (ii==2){
text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>"
}
else{
text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>"
}
}
text += "</select>"
text += "</td>"
text += "</tr></table>"
text += "</td></tr>"
text += "<tr><td>"
text += "<table border=1>"
text += "<tr>"
for (ii=0;ii<=6;ii++){
text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>"
}
text += "</tr>"
aa = 0
for (kk=0;kk<=5;kk++){
text += "<tr>"
for (ii=0;ii<=6;ii++){
text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)'>1</span></td>"
aa += 1
}
text += "</tr>"
}
text += "</table>"
text += "</td></tr>"
text += "</table>"
text += "</form>"
document.write(text)
changeCal()
}
function changeCal(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var currM = parseInt(document.calForm.selMonth.value)
var prevM
if (currM!=0){
prevM = currM - 1
}
else{
prevM = 11
}
var currY = parseInt(document.calForm.selYear.value)
var mmyyyy = new Date()
mmyyyy.setFullYear(currY)
mmyyyy.setMonth(currM)
mmyyyy.setDate(1)
var day1 = mmyyyy.getDay()
if (day1 == 0){
day1 = 7
}
var arrN = new Array(41)
var aa
for (ii=0;ii<day1;ii++){
arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1
}
aa = 1
for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
arrN[ii] = aa
aa += 1
}
aa = 1
for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
arrN[ii] = aa
aa += 1
}
for (ii=0;ii<=41;ii++){
eval("sp"+ii).style.backgroundColor = "#FFFFFF"
}
var dCount = 0
for (ii=0;ii<=41;ii++){
if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){
eval("sp"+ii).innerHTML = arrN[ii]
eval("sp"+ii).className = "c3"
}
else{
eval("sp"+ii).innerHTML = arrN[ii]
if ((dCount==0)||(dCount==6)){
eval("sp"+ii).className = "c2"
}
else{
eval("sp"+ii).className = "c1"
}
if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
eval("sp"+ii).style.backgroundColor="#90EE90"
}
}
dCount += 1
if (dCount>6){
dCount=0
}
}
}
// End -->
</script>
</HEAD>
<!-- ETAPE 2:INSEREZ LE CODE 2 ENTRE LES BALISES <BODY>..</BODY> -->
<BODY>
<script type="text/javascript">writeCalendar()</script>
<!-- Script Size: 5.15 KB -->
voila ce que ca donne.
Hors, je voudrais modifier les points suivant:
- Le dimanche sera le dernier jour de la semaine et non pas le premier. il sera en rouge.
- Le samedi sera en orange.
- La case du jour actuel reste tel qu'elle est, en vert ou alors le carré vert sera un peu plus petit pour bien le differencier.
- La date d'un evenement (prenont par exemple le 29 janvier) sera grisé pour signaler cette evenement.
Mais je ne souhaite pas qu'on puisse le modifier en ligne. Je le modifirai moi même a chaque mise a jour du site.
Au final, j'aimerai arriver a ceci.
Pouvez vou m'aider svp???
Message édité par kod34 le 20-01-2010 à 16:48:06