Anzeige eines gestapelten Ereignisdatumsformats

Wenn Sie möchten, dass das Datum in Ihren Ereignissen wie im Bild unten gestapelt angezeigt wird, können Sie dies mit einigen benutzerdefinierten JavaScript- und CSS-Schnipseln erreichen.

Es gibt zwei verschiedene Formate, die Sie erreichen können: nur das Datum und den Monat, oder das gesamte Datum. Siehe unten für Anweisungen für jedes Format:

 

Nur den Tag und den Monat anzeigen

1) Stellen Sie sicher, dass das Layout Ihrer Beiträge auf "Thumbnail" eingestellt ist, entweder über die Einstellungen auf der Seite "Post Layout" des Plugins oder über die folgende Shortcode-Option: layout=thumb

2) Legen Sie das Datumsformat des Ereignisses als erste Option im Abschnitt "Ereignisdatum" fest (Facebook-Feed > Anpassen > Beitragsstil > Formatierung des Veranstaltungsdatums), die wie folgt formatiert ist: 25. Juli, 17:30 Uhr. Sie können dies auch tun, indem Sie eventdateformat=14 in Ihrem Shortcode.

3) Fügen Sie dann im Abschnitt " Benutzerdefiniertes JavaScript" des Plugins (Facebook-Feed > Anpassen > Sonstiges) Folgendes hinzu:

$('.cff-event').each(function(){
  var $self = $(this),
      cff_sd_arr = $self.find('.cff-start-date').text().split(" ");
  $self.find('.cff-start-date').html( '<span class="cff-month">' + cff_sd_arr[0] + '</span><span class="cff-day">' + cff_sd_arr[1].replace(/\,/g,"") + '</span>' );
  $self.find('.cff-photo').html( $self.find('.cff-date') ).removeAttr('href').css('cursor', 'default');
});

4) Fügen Sie dies zum Abschnitt Custom CSS hinzu:

.cff-start-date, .cff-month, .cff-day { display: block; }
.cff-start-date { text-align: center; }
.cff-end-date, .cff-more-dates, .cff-multiple-dates, .cff-lightbox-link { display: none !important; }
.cff-month{ font-size: 20px; }
.cff-day{ font-size: 30px; }

 

Gesamtes Datum anzeigen

Facebook gestapeltes Datumsformat

1) Stellen Sie sicher, dass das Layout Ihrer Beiträge auf "Thumbnail" eingestellt ist, entweder über die Einstellungen auf der Seite "Post Layout" des Plugins oder über die folgende Shortcode-Option: layout=thumb

2) Fügen Sie Folgendes zu Ihrem Shortcode hinzu: eventdatecustom='D j M Yg:iA'.

3) Fügen Sie dann im Abschnitt " Benutzerdefiniertes JavaScript" des Plugins (Facebook-Feed > Anpassen > Sonstiges) Folgendes hinzu:

$('.cff-event').each(function(){
var $self = $(this),
cff_sd_arr = $self.find('.cff-start-date k').text().split(" ");
$self.find('.cff-start-date k').html( '<span class="cff-dayweek">' + cff_sd_arr[0] + '</span><span class="cff-day">' + cff_sd_arr[1] + '</span><span class="cff-month">' + cff_sd_arr[2].replace(/\,/g,"") + '</span><span class="cff-year">' + cff_sd_arr[3].replace(/\,/g,"") + '</span>' );
$self.find('.cff-photo').html( $self.find('.cff-start-date k') ).removeAttr('href').css('cursor', 'default');
});

4) Fügen Sie dies zum Abschnitt Custom CSS hinzu:

.cff-dayweek{ font-size: 30px; }
.cff-day{ font-size: 50px; }
.cff-month{ font-size: 25px; }
.cff-year{ font-size: 20px; }
.cff-end-date k, cff-more-dates, .cff-multiple-dates, .cff-lightbox-link { display: none !important; }
.cff-photo k{ line-height: 1; text-transform: uppercase; text-align: center; }
Unterstützung

Konnten Sie die Antwort nicht in den Dokumenten finden?

Kontakt zum Support

War dieser Artikel hilfreich?