Se si desidera che la data degli eventi sia impilata come nell'immagine sottostante, è possibile farlo utilizzando un paio di snippet JavaScript e CSS personalizzati.
È possibile ottenere due diversi formati: solo la data e il mese o l'intera data. Vedere di seguito le indicazioni per ciascuno di essi:
Visualizzare solo il giorno e il mese
1) Assicuratevi che il layout dei vostri post sia impostato su "Thumbnail", utilizzando le impostazioni nella pagina Post Layout del plugin o utilizzando la seguente opzione shortcode: layout=thumb
2) Impostate il formato della data dell'evento come prima opzione nella sezione di personalizzazione "Data evento" (Feed di Facebook > Personalizza > Stile messaggi > Formattazione data evento) che è formattato in questo modo: 25 luglio, ore 17:30. È possibile farlo anche utilizzando eventdateformat=14 nel vostro shortcode.
3) Aggiungete quindi quanto segue alla sezione Custom JavaScript del plugin (Facebook Feed > Customize > Misc):
$('.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) Aggiungere questo alla sezione CSS personalizzati:
.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; }
Visualizzare l'intera data
1) Assicuratevi che il layout dei vostri post sia impostato su "Thumbnail", utilizzando le impostazioni nella pagina Post Layout del plugin o utilizzando la seguente opzione shortcode: layout=thumb
2) Aggiungete quanto segue al vostro shortcode: eventdatecustom='.
3) Aggiungete quindi quanto segue alla sezione Custom JavaScript del plugin (Facebook Feed > Customize > Misc):
$('.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) Aggiungere questo alla sezione CSS personalizzati:
.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; }
