Formatação de calendário?

Suporte
1

Existe uma maneira simples de ajustar as cores do calendário exibido no plugin de calendário? Temos algumas reclamações sobre a acessibilidade do esquema de cores cinza claro sobre branco.

2

Não há configurações que possam ser usadas para ajustar as cores do calendário, mas as cores podem ser substituídas com um pouco de CSS. Estou longe de ser um especialista em CSS, mas algo como isto está perto do que você procura?

image
image1017×891 38.5 KB

A única alteração que fiz foi escurecer a borda externa e as linhas usadas para dividir os dias do calendário. Se esse é o tipo de alteração que você procura, posso encontrar os seletores CSS corretos para você. (O ajuste que fiz nessa captura de tela foi feito apenas através das ferramentas CSS do meu navegador.)

1 curtida
3

Obrigado! Isso seria uma grande melhoria. Gostaria de ajuda para encontrar os seletores corretos.

4

Ótimo! Você precisará editar o arquivo CSS do tema do seu site ou adicionar as alterações a um componente de tema e, em seguida, incluir esse componente em todos os temas do seu site. Usei a abordagem de componente de tema no meu site de teste. Aqui está uma tentativa de mostrar esse processo com capturas de tela:

image
image1056×604 56.9 KB

image
image823×397 25.3 KB

image
image1073×753 62.5 KB

Certifique-se de adicionar o(s) tema(s) do seu site à entrada “Incluir componente nestes temas”.

Depois de fazer isso, clique no botão “Editar CSS/HTML” e adicione o seguinte à guia CSS Comum do editor de temas:

.discourse-calendar-wrap {
    border: 5px solid var(--primary);
}

.calendar.fc.fc-unthemed .fc-content,
.calendar.fc.fc-unthemed .fc-divider,
.calendar.fc.fc-unthemed .fc-list-heading td,
.calendar.fc.fc-unthemed .fc-list-view,
.calendar.fc.fc-unthemed .fc-popover,
.calendar.fc.fc-unthemed .fc-row,
.calendar.fc.fc-unthemed tbody,
.calendar.fc.fc-unthemed td,
.calendar.fc.fc-unthemed th,
.calendar.fc.fc-unthemed thead {
    border-color: var(--primary);
}

Essa alteração define as cores da borda do calendário para a cor “primária” do seu site - a mesma cor usada para o texto do site. Ao usar a variável --primary, a alteração funciona com esquemas de cores claros e escuros:

image
image989×913 36.2 KB

image
image981×921 37.2 KB

Em vez de usar var(--primary) para definir a cor, você pode codificar uma cor hexadecimal. Por exemplo, #000000 para preto:

.discourse-calendar-wrap {
    border: 5px solid #000000;
}

Me avise se você vir algum efeito colateral indesejável dessa alteração. É possível que a segunda regra esteja selecionando alguns elementos que você prefira deixar com a cor clara antiga.

2 curtidas
5

Legal! Muito obrigado. Vou tentar amanhã.

2 curtidas