Kalender fürs Profil, fürs Poral und in den Beiträgen

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Kalender fürs Profil, fürs Poral und in den Beiträgen

Seite 1 von 2 � Seite 1 2 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8 und 7 - Fragen & Antworten Linux, Ubuntu und andere Betriebssysteme �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Kalender fürs Profil, fürs Poral und in den Beiträgen datum

20.08.2023 10:27 (zuletzt bearbeitet: 03.09.2023 08:19)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	327

Hallo ihr Lieben, ich bastele schon lange an dem Script herum, bekomme es aber nicht im Forum zum Laufen.

Meine Idee und Inspiration war es, etwas Spezielles für das Forum zu machen, das nicht jeder hat, sodass es in der Profil-Optionen zu sehen ist.

Ich weiß, ich und meine verrückten Ideen. Es sollte ein kleiner Kalender im Profilfeld sein.

Es war einfach nur eine Idee und Inspiration.

Ich hoffe, ich habe in der JS alles richtig gemacht.

Original Script geschrieben:
Datum im Kalender!

Hier mal der HTML - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 

<div class="main-crew">
  <div class="sub-crew">
    <div class="top-crew">
      <ul>
        <li></li>
        <li></li>
        
        
      </ul>
    </div>
    <div class="year-crew">
      <div id="month"></div>
      <div id="year"></div>
    </div>
  </div>
  <div class="date-crew">
    <p id="date">
    </p>
    <p id="day">aaaa</p>
  </div>
</div>
 
<script id="rendered-js">
const month = new Date();
const options = {
  month: "long" };
 

const year1 = new Date();
 
let year = year1.getFullYear();
 
const date1 = new Date();
 
let date = date1.getDate();
 
const day = new Date();
 
const options2 = {
  weekday: "long" };
 

console.log(day.toLocaleString("de-Germania", options2));
 
function myFunction() {
  document.getElementById("month").innerText = month.toLocaleString(
  "de-Germania",
  options);
 
  document.getElementById("year").innerText = year;
  document.getElementById("date").innerText = date;
  document.getElementById("day").innerText = day.toLocaleString(
  "de-Germania",
  options2);
 
}
myFunction();
//# sourceURL=pen.js
    </script>
 

Schlie�en

Und hier der CSS - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
.main-crew {
  border: 1px solid #3231315c;
  width: 100px;
  position: absolute;
  top: 60px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 0;
  box-shadow: 0px 0px 13px 3px #00000075;
  left: 40%;
  margin: 0;
  background: #e0dcdca8;
}
 
#date {
  font-size: 4em;
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  padding: 0;
}
ul li {
  list-style-type: circle;
  list-style-position: inside;
  width: 15px;
  height: 50px;
  border-radius: 10px;
  background-image: radial-gradient(white 30%, #000000e3 40%, #aca9a9ad 70%);
  margin: 0px 12px;
  display: block;
  position: relative;
  box-shadow: 0px 4px 3px 0px #000;
}
.top-crew {
  position: absolute;
  top: -50px;
}
.sub-crew {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #0bb6d9;
  border-radius: 17px 17px 0 0;
}
.year-crew {
  font-size: 20px;
  margin-top: 20px;
  padding: 10px 0 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#year {
  font-size: 14px;
}
 
.date-crew {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
#day {
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: -2px;
  font-size: 18px;
}
  
  
 
 

Schlie�en

Ich dachte nur dass man damit das Forum etwas aufpeppen kann oder etwas modernisiert.

Wie immer schon erwähnt kann jeder seine Ideen, Tipps und Inspirationen hier mit einfließen lassen, bin für alles offen.

Nette Grüße

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | Super-Kalender fürs Profil, fürs Poral und in den Beiträgen - Teil 1-4 datum

22.08.2023 10:21 (zuletzt bearbeitet: 18.12.2024 11:59)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3472
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Super-Kalender im Portal, Größe einstellbar - Teil 1
Aktualisiert 06.09.24

Hallo Daishi.

Mal wieder eine interessante Idee und das Layout über CSS!
Auch das Zeit-Skript ist klasse, kann man bestimmt vielseitig verwenden!
Bin ein Schritt weitergekommen, im Portal läuft es schon mal!
Das Profil ist im zweiten Teil dran!

Was habe ich geändert:

In der CSS standen <ul> und <li> für sich ganz allein, haben dass Forum sehr stark beeinflusst. Habe hier die Class erweitert!
Musste, um den Kalenders richtig zu positionieren, einen neuen Div-Container spendieren und "position: absolute" mit "position:relative" austauschen!
Habe den Schrift-Typ und Schrift-Größe festgelegt, damit die Schrift in allen Templates gleich bleibt.
Zum Schluss habe ich die Abstände zueinander und zum Rand angepasst und das JavaScript etwas sortiert!
Neu! Größe des Kalenders kann jetzt über eine Einstellung bestimmt werden (Zeile 4)!

Jahreszahl manipulierbarNeu! Durch die Idee von Fanie und das Szenario des 3. Jahrtausend, sind verschiedene Kalender entstanden, die in der Jahreszahl einstellbar sind!
Auch der hier vorgeschlagene Kalender!

Installation für die Portal-Box

Kalender im Portal

Der komplette HTML-Code mit CSS + JavaScript

Für den Kalender sind die seitlichen Portal-Boxen gut geeignet!
Portal aufrufen > Portal bearbeiten > Box zum Bereich ... hinzufügen.
SimplyTextBox auswählen!
Unter "Inhalt der Box" das komplette HTML-Script eintragen, speichern!

In Zeile 24+25 kann der Hintergrund und die Schriftfarbe für den unteren Teil, in Zeile 65+66 für den oberen Teil des Kalenders angepasst werden!
Neu! Größe des Kalenders kann jetzt über eine Einstellung bestimmt werden (Zeile 4)!
Neu! Jahreszahl über Zeile 134 verschiebbar! Zeile 131 löschen oder auskommentieren und Zeile 134 freigeben!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
<style>
.main-crew {
  /* Groeße Kalender im Portal */
  --GroesseKalender: 130px;      
}
 
.container-crew {
  display: flex;
  flex-direction: column;
  color:#222222;
  align-items: center;
  justify-content: center;
  height:auto; 
  margin: 0 auto;
}
.main-crew {
  position: relative;
  border: 1px solid #797979;
  width:  var(--GroesseKalender);
  border-radius: calc(var(--GroesseKalender)/10); 
  padding: 0;
  box-shadow: 0px 0px 13px 3px #777777;
  margin: calc(var(--GroesseKalender)/4) auto;
  background: #e0dcdc;
  color: #222222;
}
.main-crew #date2 {
  font: calc(var(--GroesseKalender)/2.0) Arial, sans-serif;
  letter-spacing: 1px;
  margin-right: auto;
  margin-left:auto;
  margin-top: calc(var(--GroesseKalender)/14); 
  margin-bottom: calc(var(--GroesseKalender)/6.5);
  padding: 0;
}
.main-crew ul {
  display: flex;
  padding: 0;
  margin: 0;
}
.main-crew ul li {
  list-style-type: circle;
  list-style-position: inside;
  width: calc(var(--GroesseKalender)/11);
  height: calc(var(--GroesseKalender)/2.7);
  border-radius: calc(var(--GroesseKalender)/10); 
  background-image: radial-gradient(white 30%, #000000 40%, #aca9a9 70%);
  margin-right: calc(var(--GroesseKalender)/4.8); 
  margin-left: calc(var(--GroesseKalender)/4.8);
  display: block;
  position: relative;
  box-shadow: 0px 4px 3px 0px #000;
}
.main-crew .top-crew {
  position: absolute;
  top: calc(var(--GroesseKalender)/-4.3);
}
.main-crew .sub-crew {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-radius: calc(var(--GroesseKalender)/10) calc(var(--GroesseKalender)/10) 0 0; 
 
  background: #0bb6d9; 
  color: #222222;
}
.main-crew .year-crew {
  font: calc(var(--GroesseKalender)/6.5) Arial, sans-serif;
  letter-spacing: 1px;
  margin-top: calc(var(--GroesseKalender)/7.5);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-crew #year2 {
  font: calc(var(--GroesseKalender)/9.3) Arial, sans-serif;
  letter-spacing: 1px;
}
 
.main-crew .date-crew {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.main-crew #day2 {        
  padding:10px;
  margin: 0;
  position: absolute;
  bottom: -5px;
  font: calc(var(--GroesseKalender)/7.2) Arial, sans-serif;
  letter-spacing: 1px;
}
</style>
 
<div class="container-crew">
<div class="main-crew">
  <div class="sub-crew">
    <div class="top-crew">
      <ul>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="year-crew">
      <div id="month2"></div>
      <div id="year2"></div>
    </div>
  </div>
  <div class="date-crew">
    <p id="date2"></p>
    <p id="day2"></p>
  </div>
</div>
</div>
 
<script>
const month2 = new Date();
const options = {month: "long" };
const year1 = new Date();
const date1 = new Date();
const day2 = new Date();
const options2 = {weekday: "long" };
 
let year2 = year1.getFullYear();
let date2 = date1.getDate();
 
function myKalender() {
  document.getElementById("year2").innerText = year2;
 
  // Das Jahr manipulieren (+1009 = Jahr 3033)
  // document.getElementById("year2").innerText = year2+1009;
  document.getElementById("month2").innerText = month2.toLocaleString( "de-Germania", options);
  document.getElementById("date2").innerText = date2;
  document.getElementById("day2").innerText = day2.toLocaleString( "de-Germania", options2);
}
myKalender();
 
//# sourceURL=pen.js
</script>
 

Schließen

Bis dann und nochmals besten Dank an Daishi
Wolfgang

844er findet das Top!

Antworten

Moderations-Kommentar:

Zeit-Skripte haben sich gegenseitig gestört, Classes erweitert!
Größe des Kalenders über eine Einstellung veränderbar (Zeile 4)!
Jahreszahl jetzt manipulierbar!

#3 | Super-Kalender fürs Profil, fürs Poral und in den Beiträgen - Teil 1-4 datum

22.08.2023 10:23 (zuletzt bearbeitet: 18.12.2024 11:59)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3472
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Super-Kalender für den Geburtstag im Profil - Teil 2
Aktualisiert 15.09.2024

Der Super-Kalender fürs Profil ist fertig!
Er zeigt den Geburtstag an und ermittelt den Wochentag dazu, auch im FireFox!
Funktioniert in allen Templates!
Neu! Jetzt auch auf iPhones und Safari-Browser!

Der Super-Kalender im V6

Installation für alle Templaes & Mobil

Das Plugin ist mit Template- und Sprach-Variablen bestückt, wird unter "Mitglieder Profil - Footer" angelegt (bessere Ladezeiten)!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!

In Zeile 4 wird mit einer Einstellung die Größe des Kalenders bestimmt, alle anders Classes passen sich an!
In Zeile 20 wird die Farbe des unteren Teils und in Zeile 61 die Farbe des oberen Teils des Kalenders bestimmt!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
<style>
.container-kalender {
/* Groesse des Kalenders im Profil */
--GroesseKalender: 70px;
  
  display: flex;
  color:#222222;
  align-items: center;
  height:auto; 
  margin: 0 auto;
}
.main-kalender {
  position: relative;
  border: 1px solid #797979;
  width:  var(--GroesseKalender);
  border-radius: calc( var(--GroesseKalender) / 10  ); 
  padding: 0;
  box-shadow: 0px 0px 13px 3px #777777;
  margin: calc(var(--GroesseKalender)/4) 5px;
  background: #e0dcdc;
  color:#222222;
}
.main-kalender #date {
  font: calc(var(--GroesseKalender)/2.0 ) Arial, sans-serif;
  letter-spacing: 1px;
  margin-right: auto;
  margin-left:auto;
  margin-top: calc(var(--GroesseKalender)/14); 
  margin-bottom: calc(var(--GroesseKalender)/6.5);
  padding: 0;
}
.main-kalender ul {
  display: flex !important;
  padding: 0;
  margin: 0;
}
.main-kalender ul li {
  list-style-type: circle;
  list-style-position: inside;
  width: calc(var(--GroesseKalender) / 11); 
  height: calc(var(--GroesseKalender) / 2.7); 
  border-radius: calc(var(--GroesseKalender) / 10); 
  background-image: radial-gradient(white 30%, #000000 40%, #aca9a9 70%);
  margin-right: calc(var(--GroesseKalender)/4.8); 
  margin-left: calc(var(--GroesseKalender)/4.8);
  display: block !important;
  position: relative !important;
  box-shadow: 0px 4px 3px 0px #000;
}
.main-kalender .top-kalender {
  position: absolute;
  top: calc(var(--GroesseKalender)/-4.3);
}
.main-kalender .sub-kalender {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-radius: calc(var(--GroesseKalender)/10) calc(var(--GroesseKalender)/10) 0 0; 
 
  background: #0bb6d9;
  color: #222222;
}
.main-kalender .year-kalender {
  font: calc(var(--GroesseKalender)/6.5) Arial, sans-serif;
  letter-spacing: 1px;
  margin-top: calc(var(--GroesseKalender)/7.5);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-kalender #year {
  font: calc(var(--GroesseKalender)/9.3) Arial, sans-serif;
  letter-spacing: 1px;
}
 
.main-kalender .date-kalender {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.main-kalender #day {   
  padding:10px;
  margin: 0;
  position: absolute;
  bottom: -5px;
  font: calc(var(--GroesseKalender)/7.2) Arial, sans-serif;
  letter-spacing: 1px;
}
  
.profilerowgroup .titlecell {
  vertical-align: top;
}
</style>
 

<script>
window.addEventListener('load', function(){
 
  {{template==144.start}}                
    var $dateVarDatum = $('#birthday_row .titlecell:contains("{[userprofile_birthday]}")').next().html(`
  {{template==144.end}}
  {{template==111.start}}
    var $dateVarDatum = $('.c_r_content3 td:contains("{[userprofile_birthday]}")').next().html(`
  {{template==111.end}}
  {{template==1.start}}
    var $dateVarDatum = $('.userInformations td:contains("{[userprofile_birthday]}")').next().html(`
  {{template==1.end}}
  {{template==177.start}}
    var $dateVarDatum = $('#birthday_row .ptitle:contains("{[userprofile_birthday]}")').next().next().html(`
  {{template==177.end}}
 
      <div class="container-kalender">
        <div class="main-kalender">
          <div class="sub-kalender">
            <div class="top-kalender">
              <ul>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div class="year-kalender">
              <div id="month"></div>
              <div id="year">{{birthday_year}}</div>
            </div>
          </div>
          <div class="date-kalender">
            <p id="date">{{birthday_day}}</p>
            <p id="day"></p>
          </div>
        </div>
      </div>
    `);
 
  var monthDate = "{{birthday_month}}".replace(/\D/g,"");
  var gebDatum = new Date(''+monthDate+'/{{birthday_day}}/{{birthday_year}} 00:00:00');
  var wochentag = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"];
  var month = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
  var wTag = wochentag[gebDatum.getDay()];
  var Monat = month[gebDatum.getMonth()];
  
  $('#day').html(''+wTag+'');
  $('#month').html(''+Monat+'');
  
  // Bei leeren Feldern mit {{value}} ausblenden
    $("tablecell:contains('value')").closest('.profilerow, .customsfield, tr').hide();
  // Kein Eintrag  
    $("div.currency span:empty").closest('.profilerow, .customsfield, tr').hide();
});
</script>
 

Schließen

Viel Erfolg bei Einbau
Wolfgang

Wolfgang hat folgende Bilder an diesen Beitrag angeh�ngt

01.png

1.0.png

Als Diashow anzeigen

Antworten

Moderations-Kommentar:

Neues Datumsformat eingetragen, funktioniert jetzt auch auf iPhones und im Safari-Browser

#4 | RE: Kalender fürs Portal - Teil 1 datum

22.08.2023 10:53 (zuletzt bearbeitet: 05.09.2023 14:04)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	327

Aktualisiert 29.08.23

Hallo Wolfgang, ich hoffe du bist mir nicht Böse, ich habe eine Änderung vorgenommen.

Da die 2 Metallringe zu weit auseinander waren, habe ich noch einen Metallring hinzugefügt.

Mein Vorschlag und Änderung:

Hier nochmal der veränderte gesamte - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
<style>
.main-crew {
  /* Groeße Kalender im Portal */
  --GroesseKalender: 130px;      
}
 
.container-crew {
  display: flex;
  flex-direction: column;
  color:#222222;
  align-items: center;
  justify-content: center;
  height:auto; 
  margin: 0 auto;
}
.main-crew {
  position: relative;
  border: 1px solid #797979;
  width:  var(--GroesseKalender);
  border-radius: calc(var(--GroesseKalender)/10); 
  padding: 0;
  box-shadow: 0px 0px 13px 3px #777777;
  margin: calc(var(--GroesseKalender)/4) auto;
  background: #e0dcdc;
  color: #222222;
}
.main-crew #date2 {
  font: calc(var(--GroesseKalender)/2.0) Arial, sans-serif;
  letter-spacing: 1px;
  margin-right: auto;
  margin-left:auto;
  margin-top: calc(var(--GroesseKalender)/14); 
  margin-bottom: calc(var(--GroesseKalender)/6.5);
  padding: 0;
}
.main-crew ul {
  display: flex;
  padding: 0;
  margin: 0;
}
.main-crew ul li {
  list-style-type: circle;
  list-style-position: inside;
  width: calc(var(--GroesseKalender)/12);
  height: calc(var(--GroesseKalender)/3);
  border-radius: calc(var(--GroesseKalender)/10); 
  background-image: radial-gradient(white 30%, #000000e3 40%, #aca9a9ad 70%);
  margin-right: calc(var(--GroesseKalender)/8); 
  margin-left: calc(var(--GroesseKalender)/8); 
  display: block;
  position: relative;
  box-shadow: 0px 4px 3px 0px #000;
}
.main-crew .top-crew {
  position: absolute;
  top: calc(var(--GroesseKalender)/-4.3);
}
.main-crew .sub-crew {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-radius: calc(var(--GroesseKalender)/10) calc(var(--GroesseKalender)/10) 0 0; 
 
  background: #0bb6d9; 
  color: #222222;
}
.main-crew .year-crew {
  font: calc(var(--GroesseKalender)/6.5) Arial, sans-serif;
  letter-spacing: 1px;
  margin-top: calc(var(--GroesseKalender)/7.5);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-crew #year2 {
  font: calc(var(--GroesseKalender)/9.3) Arial, sans-serif;
  letter-spacing: 1px;
}
 
.main-crew .date-crew {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.main-crew #day2 {        
  padding:10px;
  margin: 0;
  position: absolute;
  bottom: -5px;
  font: calc(var(--GroesseKalender)/7.2) Arial, sans-serif;
  letter-spacing: 1px;
}
</style>
 
<div class="container-crew">
<div class="main-crew">
  <div class="sub-crew">
    <div class="top-crew">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="year-crew">
      <div id="month2"></div>
      <div id="year2"></div>
    </div>
  </div>
  <div class="date-crew">
    <p id="date2"></p>
    <p id="day2"></p>
  </div>
</div>
</div>
 
<script>
const month2 = new Date();
const options = {month: "long" };
const year1 = new Date();
const date1 = new Date();
const day2 = new Date();
const options2 = {weekday: "long" };
 
let year2 = year1.getFullYear();
let date2 = date1.getDate();
 
function myKalender() {
  document.getElementById("year2").innerText = year2;
  document.getElementById("month2").innerText = month2.toLocaleString( "de-Germania", options);
  document.getElementById("date2").innerText = date2;
  document.getElementById("day2").innerText = day2.toLocaleString( "de-Germania", options2);
}
myKalender();
 
//# sourceURL=pen.js
</script>
 

Schlie�en

CSS:
Ich habe in der CSS in Zeile 35, 36 und 39 die Werte angepasst.

HTML:
In Zeile 94 folgendes hinzugefügt.

1
 
<li></li>

Es ist nur ein Vorschlag, ich dachte mir, dass sieht mit drei Metallringen besser aus.

Ich hoffe, dass du mir nicht böse bist, dass ich jetzt an dem Script Veränderungen gemacht habe.

Nette Grüße

Daishi

Daishi

Wolfgang findet das Top!

Antworten

Moderations-Kommentar:

Zeit-Skripte haben sich gegenseitig gestört, Classes erweitert!
Größe des Kalenders über eine Einstellung veränderbar (Zeile 4)!

#5 | Fehlersuche: Kalender fürs Portal - Teil 1 datum

28.08.2023 22:53 (zuletzt bearbeitet: 03.09.2023 08:22)

Bei mir sieht es nach dem Einfügen der Skripts (Wolfgang und Daishis) so aus. Was mache ich falsch???

Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Antworten

#6 | Fehlersuche: Kalender fürs Portal - Teil 1 datum

29.08.2023 10:35 (zuletzt bearbeitet: 03.09.2023 08:22)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	327

Hmm, dasselbe Problem habe ich im Profilfeld, bei mir zeigt es nur 1-mal sauber an. Bei dem Rest zeigt es so an wie bei dir.

Suche da auch noch den Fehler, ich habe auch testweise alle anderen CSS herausgemacht, bis jetzt keine Änderung in Sicht.

Suche aber weiter, vielleicht finde ich noch heraus, wo der Haken hier sitzt für die Fehlanzeige.

Versuche mal bitte den Code bei dir im Portal einzugeben:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
  <style>
.container-crew {  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height:250px; 
  margin:auto; 
}
.main-crew {
  position: relative;
  border: 1px solid #323131;
  width: 130px;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0px 0px 13px 3px #777777;
  margin: auto;
  background: #e0dcdc;
  color: #000000;
}
.main-crew #date {
  font: 4em Arial, sans-serif;
  letter-spacing: 1px;
  margin: 10px 10px 25px 10px;
  padding: 0;
}
.main-crew ul {
  display: flex;
  padding: 0;
  margin: 0;
}
.main-crew ul li {
  list-style-type: circle;
  list-style-position: inside;
  width: 12px;
  height: 45px;
  border-radius: 10px;
  background-image: radial-gradient(white 30%, #000000e3 40%, #aca9a9ad 70%);
  margin: 0 15px;
  display: block;
  position: relative;
  box-shadow: 0px 4px 3px 0px #000;
}
.main-crew .top-crew {
  position: absolute;
  top: -30px;
}
.main-crew .sub-crew {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-radius: 20px 20px 0 0;
  background: #0bb6d9;
  color: #000000;
}
.main-crew .year-crew {
  font: 20px Arial, sans-serif;
  letter-spacing: 1px;
  margin-top: 20px;
  padding: 10px 0 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-crew #year {
  font: 14px Arial, sans-serif;
  letter-spacing: 1px;
}
 
.main-crew .date-crew {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.main-crew #day {
  padding:10px;
  margin: 0;
  position: absolute;
  bottom: -2px;
  font: 18px Arial, sans-serif;
  letter-spacing: 1px;
}
</style>
 
<div class="container-crew">
<div class="main-crew">
  <div class="sub-crew">
    <div class="top-crew">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="year-crew">
      <div id="month"></div>
      <div id="year"></div>
    </div>
  </div>
  <div class="date-crew">
    <p id="date"></p>
    <p id="day"></p>
  </div>
</div>
</div>
 
<script>
const month = new Date();
const options = {month: "long" };
const year1 = new Date();
const date1 = new Date();
const day = new Date();
const options2 = {weekday: "long" };
 
let year = year1.getFullYear();
let date = date1.getDate();
 
function myKalender() {
  document.getElementById("year").innerText = year;
  document.getElementById("month").innerText = month.toLocaleString( "de-Germania", options );
  document.getElementById("date").innerText = date;
  document.getElementById("day").innerText = day.toLocaleString( "de-Germania", options2 );
}
myKalender();
 
//# sourceURL=pen.js
</script>
   
 

Schlie�en

Vielleicht zeigt er bei dir richtig an

Nette Grüße

Daishi

Daishi

Antworten

#7 | Fehlersuche: Kalender fürs Portal - Teil 1 datum

29.08.2023 11:18 (zuletzt bearbeitet: 18.12.2024 11:52)

Fehlersuche: Kalender fürs Portal - Teil 1

Kalender fürs Portal - Stabil, Größe einstellbar

Hallo Daishi,
da warst Du mal wieder schneller.
Ich habe die Ursache gefunden, aber der Beitrag war noch nicht fertig!!!

Hallo Arndt.

Du hast keinen Fehler gemacht!

Es liegt an den Skripten im Portal, die sich gegenseitig beeinflusst haben!
Hier hast Du bereits 2 Zeit-Skripte eingebaut, jetzt kam auch noch der Kalender mit dem aktuellen Datum dazu!

Was habe ich gemacht:

Habe einfach die wichtigen, zeitbestimmenden Classes mit "2" erweitert z.B.: "month2", "year2", ...
Neu! Weil die Größenveränderung mit einer Einstellung in der "Spenden-Münze" gut geklappt hat, habe ich das hier auch mit dem Kalender hinbekommen!
Wenn Du also die Größe des Kalenders ändern willst, brauchst Du nur am Anfang die Größe verändern und der Kalender passt sich mit all seinen Classes an!
Bin Daishi's Vorschlag gefolgt, habe die Ringe etwas verkleinert und weiter zusammengeschoben!

Habe alles in Beitrag #2 und Beitrag #4 nachgetragen!

Mal wieder besten Dank fürs Testen und fürs Feedback!
Wolfgang

844er und Kipper-Spedition finden das Top!

Antworten

Moderations-Kommentar:

Zeit-Skripte haben sich gegenseitig gestört, Classes erweitert!
Größe des Kalenders über eine Einstellung veränderbar (Zeile 4)!

#8 | Kalender fürs Profil, fürs Portal und in den Beiträge - Teil 1-4 datum

31.08.2023 14:44 (zuletzt bearbeitet: 18.12.2024 12:00)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3472
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Kalender für die Profil Optionen mit Wochentag - Teil 3
Aktualisiert 15.09.2024

Der Wochentag in Beitrag #2 wird automatisch errechnet.
Wie wäre es, wenn zum Geburtsdatum auch der Wochentag angezeigt wird?
Allerdings ist ein bestimmtes Format erforderlich, besonders beim FireFox, der nicht mit sich handeln lässt!
Im Support hat sich auch eine brauchbare Lösung gefunden, echt super und nochmal ein großes Dankeschön an alle Helfer!!!

Das Faszinierende ist jetzt, dass nach Eingabe des Geburtsdatums der Wochentag automatisch errechnet und angehängt wird!
Super Funktion, denn wer kennt den Wochentag seiner Geburt?
Neu! Neues Zeitformat hinzugefügt, funktioniert jetzt auch auf iPhones und im Safari-Browser!

Installation für alle Templates & Mobil

Das komplette Skript kann der Einfachheit wegen oder zum Testen, für die Template (v1-4) in die Kopf- oder Fußzeile, für das neue Xobor V6 & Mobil nach Eigenes Javascript kopiert werden.

Besser ist es das Skript als Plugin unter "Mitglieder Profil - Footer" anzugelegen (bessere Ladezeiten)!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!

In Zeile 3+4 stecken die verschiedenen Classes der Templates!
Im Profil wird über die Monatsvariable z.B. "monat_11" ausgegeben!
Zeile 5 sorgt dafür, dass in diesem Fall die nur die "11" (November) anerkannt wird und in die Zeitrechnung einfließt!
In Zeile 6 steht das Datum-Format zur Verfügung!
In Zeile 7 werden die Wochentage bestimmt (in Deutsch)!
In Zeile 8 wird der Wochentag numerisch errechnet.
In Zeile 10+11 wird der Wochentag (v1-4 und v6) an das Geburtsdatum angehängt!

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script>
window.addEventListener('load', function(){
  var dateVarDatum_v1_4 = $('.titlecell:contains("Geburtsdatum"), .c_r_content3 td:contains("Geburtsdatum"), .userInformations td:contains("Geburtsdatum")').next();
  var dateVarDatum_v6 = $('#birthday_row .ptitle:contains("Geburtsdatum")').next().next(); 
  var monthDate = "{{birthday_month}}".replace(/\D/g,"");
  var gebDatum = new Date(''+monthDate+'/{{birthday_day}}/{{birthday_year}} 00:00:00');
  var wochentag = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"];
  var wTag = wochentag[gebDatum.getDay()];
  
  dateVarDatum_v1_4.append(' - '+wTag+'');
  dateVarDatum_v6.append(' - '+wTag+'');
});
</script>
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Bis dann und viel Erfolg beim Nachbau
Wolfgang

Gabriella und Daishi finden das Top!

Antworten

Moderations-Kommentar:

Plugin überarbeitet und minimiert, für alle Templates!
Neues Zeitformat hinzugefügt, funktioniert jetzt auch auf iPhones und im Safari-Browser

#9 | Super-Kalender fürs Profil, fürs Portal und in den Beiträge - Teil 1-4 datum

15.09.2023 16:33 (zuletzt bearbeitet: 18.12.2024 11:57)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3472
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1339

Super-Kalender in den Beiträge - Teil 4
Aktualisiert 11.09.2024

Möchte man ein Ereignis, ein Event oder ein besonderer Anlass stärker in den Beiträgen hervorheben, geht das sehr gut mit dem vorgeschlagenen Super-Kalender.
Hier wird nur ein neuer Foren-Code benötigt, in dem das Datum eingetragen wird!
Auch hier war es möglich automatisch den Wochentag für ein Multi-Kalender zu generieren!

Die Funktion:

Es können mehrere Kalender in einem und in anderen Beiträgen verwendet werden!
Zusätzlich ist über eine Unterschrift eine Beschreibung des Events möglich!
Es sind mehrere Datumsformate zulässig.
Es ist nur ein neuer Foren-Code erforderlich!
Auch hier lässt sich die Kalendergröße durch eine Eintragung anpassen!
Selbst der Wochentag wir automatisch ermittelt!

Zulässige Datums-Formate:

5.1.2024
5.01.2024
05.1.2024
05.01.2024

Installation für alle Template & Mobil

2024

Party

2024

Training

2024

Tanzen

Der HTML-Code zur Übersicht

Der neue Foren-Code

Einbau HTML-Script

Einbau in die Iconbar

Bis dann und gutes Gelingen
Wolfgang

Daishi und Kipper-Spedition finden das Top!

Antworten

Moderations-Kommentar:

JavaScript überarbeitet, funktioniert jetzt sogar auf iPhones und Apple-PC's

#10 | RE: Super-Kalender fürs Profil, fürs Portal und in den Beiträge - Teil 1-4 datum

22.10.2023 22:16

Hallo Wolfgang,
ich hab den Kalender zum ersten Mal eingebaut - funktioniert super!
Ein kleines Aber gibt es: in der mobilen Ansicht wird beim IPhone der Wochentag immer mit "undefined" angezeigt. Nichts dramatisches, aber vielleicht findest du eine schnelle Lösung.

schon mal!
Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Antworten

Für die Iconbar: Wählbares + aktuelles Datum in Beiträgen einfügen! � � Star Wars Intro

Seite 1 von 2 � Seite 1 2 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Wichtige Nachrichten vom Admin, im Profil für alle User!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

18.04.2024 23:08
von

Anne • Zugriffe: 257

Sternzeichen ins Profil einbauen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 3 27.03.2024 09:55
Wolfgang • Zugriffe: 728

Ich weiß jetzt nicht mehr weiter - Bar Graf im Profil
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi

12.08.2023 10:01
von

Daishi • Zugriffe: 1188

Animierter Benutzer / Avatar mit Link zum Profil
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 18 24.07.2023 00:08
Anne • Zugriffe: 1320

Profil Wohnort-Wappen einstellen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Haviforumstreffpunkt

29.09.2019 14:24
von

Haviforumstreffpunkt • Zugriffe: 873

Event Kalender
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Magister 3 05.10.2015 15:18
Wolfgang • Zugriffe: 926

Durchschnittliche Beiträge ins User-Profil einbauen - Teil 1 + 2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

21.12.2019 07:18
von

Wolfgang • Zugriffe: 2228

Zeitspanne im Kalender immer anzeigen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 14.02.2012 20:06
Wolfgang • Zugriffe: 1224
Avatar-Bilder fürs Benutzer-Profil
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 2 21.03.2016 16:47
Wolfgang • Zugriffe: 22431

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

58%