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 Betriebssystem MS Windows 11, 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - 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:	387
Registriert seit:	08.01.2022

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

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: 06.09.2024 10:12)

Wolfgang

Administrator

Informationen anzeigen

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

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

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: 16.09.2023 07:27)

Wolfgang

Administrator

Informationen anzeigen

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

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

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

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!

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
153
154
155
156
157
158
159
160
161
162
163
164
165
 
<style>
.container-kalender {
/* Groesse des Kalenders im Profil */
--GroesseKalender: 100px;
  
  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>
    `);
 
  {{template==144.start}}
    var $dateVarDatum = $('#birthday_row .titlecell:contains("{[userprofile_birthday]}")').next();
  {{template==144.end}}
  {{template==111.start}}
    var $dateVarDatum = $('.c_r_content3 td:contains("{[userprofile_birthday]}")').next();
  {{template==111.end}}
  {{template==1.start}}
    var $dateVarDatum = $('.userInformations td:contains("{[userprofile_birthday]}")').next();
  {{template==1.end}}
  {{template==177.start}}
   var $dateVarDatum = $('#birthday_row .ptitle:contains("{[userprofile_birthday]}")').next().next();
  {{template==177.end}}
  
  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 gebDatum = new Date({{birthday_year}}, "{{birthday_month}}".replace(/\D/g,"")-1,{{birthday_day}});
  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

#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:	387
Registriert seit:	08.01.2022

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

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:	387
Registriert seit:	08.01.2022

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

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: 05.09.2023 14:05)

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: 05.09.2023 13:58)

Wolfgang

Administrator

Informationen anzeigen

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

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

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

Ich war gerade dabei in Beitrag #2 den Super-Kalender für den Geburtstag einzubauen!
Muss leider noch ein wenig warten!

Da ist mir aufgefallen, dass der Wochentag fehlt, der ja im aktuellen Datum automatisch errechnet wird, im Geburtsdatum aber nicht vorhanden ist!
Es ist möglich aus dem Grburtstag den Wochentag zu ermitteln, aber es ist ein bestimmtes Format erforderlich, besonders beim FireFox, der nicht mit sich handeln lässt!
Im Support hat sich 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?

Installation für alle Templates & Mobil

Getestet in allen Templates, im FF, Google Chrome, Opera, Vivaldi, Andoid-Handy und Android-Tablet

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!

Das komplette Skript kann der Einfachheit wegen oder zum Testen, für die Template (v1-4) in die Kopf- oder Fußzeile kopiert werden.
Ist allerdings aufwendiger und hat nicht die Vorteile eines Plugins!

In Zeile 4 stecken die verschiedenen Classes der Templates!
In Zeile 14-15 wird der Punkt von Tag ausgeblendet (für FF).
In Zeile 18 werden die Wochentage bestimmt (in Deutsch)!
In Zeile 20 wird der Wochentag numerisch errechnet.
In Zeile 21 steht der Wochentag!
In Zeile 23 wird der Wochentag an das Geburtsdatum angehängt!

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
 
<script>
// Für die Templates (v1-4)
$(function(){
var dateVarDatum = $('.titlecell:contains("Geburtsdatum"), .c_r_content3 td:contains("Geburtsdatum"), .userInformations td:contains("Geburtsdatum")').next();
var dateVar = dateVarDatum.html();
var dsplit = dateVar.split(" ");
 
let m4=dsplit[2].substr(0,3);
if (m4=="M\u00e4r" ) dsplit[2]="march";
if (m4=="Mai" ) dsplit[2]="may";
if (m4=="Okt" ) dsplit[2]="oct";  
if (m4=="Dez" ) dsplit[2]="dec";
 
let m5=dsplit[1].substr(2,3);
if (m5=="." ) dsplit[1]=dsplit[1].replace(/.{0,1}$/, '');
 
const datum = new Date(''+dsplit[1]+'-'+dsplit[2]+'-'+dsplit[3]+'');
const wochentag = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];
 
let woche = datum.getDay();
let day = wochentag[woche];
 
dateVarDatum.append(' - '+day+'');
});
</script>
 

Schlie�en

Das komplette Skript kann der Einfachheit wegen oder zum Testen, für das neue Xobor V6 & Mobil nach Eigenes Javascript kopiert werden.
Ist allerdings aufwendiger und hat nicht die Vorteile eines Plugins!

In Zeile 4 steckt die Class fürs V6!
In Zeile 14-15 wird der Punkt von Tag ausgeblendet (für FF).
In Zeile 18 werden die Wochentage bestimmt (in Deutsch)!
In Zeile 20 wird der Wochentag numerisch errechnet.
In Zeile 21 steht der Wochentag!
In Zeile 23 wird der Wochentag an das Geburtsdatum angehängt!

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
 
<script>
// Für das neue Templates (v6) & Mobil
$(function(){
var dateVarDatum = $('#birthday_row .ptitle:contains("Geburtsdatum")').next().next();
var dateVar = dateVarDatum.html();
var dsplit = dateVar.split(" ");
 
let m4=dsplit[1].substr(0,3);
if (m4=="Mär" ) dsplit[1]="march";
if (m4=="Mai" ) dsplit[1]="may";
if (m4=="Okt" ) dsplit[1]="oct";  
if (m4=="Dez" ) dsplit[1]="dec";
 
let m5=dsplit[0].substr(2,3);
if (m5=="." ) dsplit[0]=dsplit[0].replace(/.{0,1}$/, '');
 
const datum = new Date(''+dsplit[0]+'-'+dsplit[1]+'-'+dsplit[2]+'');
const wochentag = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];
 
let woche = datum.getDay();
let day = wochentag[woche];
 
dateVarDatum.append(' - '+day+'');
});
</script>
 

Schlie�en

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 5, 8, 11 und 14 stecken die verschiedenen Classes der Templates!
In Zeile 16 werden die Wochentage bestimmt (in Deutsch)!
In Zeile 17 wird der Wochentag numerisch errechnet.
In Zeile 18 steht der Wochentag!
In Zeile 19 wird der Wochentag an das Geburtsdatum angehängt!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<script>
// Für das neue Templates (v6) & Mobil
  window.addEventListener('load', function(){
    {{template==144.start}}
      var $dateVarDatum = $('#birthday_row .titlecell:contains("{[userprofile_birthday]}")').next();
    {{template==144.end}}
    {{template==111.start}}
      var $dateVarDatum = $('.c_r_content3 td:contains("{[userprofile_birthday]}")').next();
    {{template==111.end}}
    {{template==1.start}}
      var $dateVarDatum = $('.userInformations td:contains("{[userprofile_birthday]}")').next();
    {{template==1.end}}
    {{template==177.start}}
     var $dateVarDatum = $('#birthday_row .ptitle:contains("{[userprofile_birthday]}")').next().next();
    {{template==177.end}}
    var wochentag = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"];
    var gebTag = new Date({{birthday_year}}, "{{birthday_month}}".replace(/\D/g,"")-1,{{birthday_day}});
    var wTag = wochentag[gebTag.getDay()];
    $dateVarDatum.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 durch Mike48's Vorschlag überarbeitet und verbessert.

#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: Heute 18:06)

Wolfgang

Administrator

Informationen anzeigen

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

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

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

Versteckte Kommentare in Forum-Beiträgen nutzen! �

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: 182

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: 613

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: 1153

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: 1273

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: 838

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: 886

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: 2162

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: 1184
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: 22326

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 €

17%