Se quiser que a data dos seus eventos seja apresentada de forma empilhada, como na imagem abaixo, pode fazê-lo utilizando alguns snippets de JavaScript e CSS personalizados.
Existem dois formatos diferentes que pode obter: apenas a data e o mês, ou a data completa. Veja abaixo as instruções para cada um deles:
Mostrar apenas o dia e o mês
1) Certifique-se de que a disposição das suas mensagens está definida como "Miniatura", utilizando as definições na página Post Layout do plugin ou utilizando a seguinte opção de shortcode: layout=thumb
2) Definir o formato da data do evento para ser a primeira opção na secção de personalização "Data do evento" (Feed do Facebook > Personalizar > Estilizar publicações > Formatação da data do evento) que tem o seguinte formato: 25 Jul, 17:30h. Também o pode fazer utilizando eventdateformat=14 no seu código curto.
3) Em seguida, adicione o seguinte à secção JavaScript personalizado do plug-in (Feed do Facebook > Personalizar > Diversos):
$('.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) Adicione isto à secção CSS personalizada:
.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; }
Exibir a data inteira
1) Certifique-se de que a disposição das suas mensagens está definida como "Miniatura", utilizando as definições na página Post Layout do plugin ou utilizando a seguinte opção de shortcode: layout=thumb
2) Adicione o seguinte ao seu shortcode: eventdatecustom='.
3) Em seguida, adicione o seguinte à secção JavaScript personalizado do plug-in (Feed do Facebook > Personalizar > Diversos):
$('.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) Adicione isto à secção CSS personalizada:
.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; }
