Alterando Layout da Aplicação de Calendário

Programação
#1

[center][size=1.45em][b]Alterando Layout da Aplicação de Calendário

[/b][/size][/center]O ScriptCase possui temas próprio como padrão afim de auxiliar na produtividade do seu projeto. E isso é ótimo, porém nem por isso o usuário é limitado na personalização do seu próprio tema através do editor. É possível alterarmos através do próprio editor mesmo que algumas classes de CSS não estejam disponíveis para edição. Neste exemplo vou utilizar a aplicação de calendário.

É bem simples e rápido de fazer. Como garantia faça uma cópia do tema Sc8_BlueWood e utilize o código abaixo na área do editor.

  1. No tema criado (Cópia do Sc8_BlueWood) acesse a opção Página na área Calendário.
  2. Na opção Cor de Fundo insira o código abaixo:

#F9F9F9;}.fc-header-title{color:#525252 !important;}.fc-today{background-color: #FCFCC9 !important;} .fc-day-header{height: 40px !important;line-height: 40px !important;background-color: #34495E !important;color:#FFF !important;border:1px solid #34495E !important;} .fc-button{font-family: Arial, sans-serif !important;font-weight:bold !important;font-size:13px !important;height:28px !important;line-height:28px !important;} .fc-state-default{color:#525252 !important;}.fc-state-active{background-color:#D5D5D5 !important;}.fc-day-number{color:#525252 !important;} .fc-event-inner{color: #525252 !important;font-size: 13px !important;font-family: Arial,px sans-serif !important;} .fc-agenda-days th{height: 40px !important;line-height: 40px !important;background-color: #34495E !important;color:#FFF !important;border:1px solid #34495E !important

  1. Salve e altere o tema na configuração de layout na própria aplicação de calendário.

O resultado você pode conferir na imagem abaixo por anexo.

Observação: Este não é um procedimento recomendado a menos que você saiba o que está fazendo. Futuramente estaremos disponibilizando configurações como esta na própria interface. O recomendado é solicitar através do e-mail sugestao@netmake.com.br que implementem os parâmetros não disponíveis.
Porém, esta é uma ótima dica para quem precisa de uma solução rápida.

cal.png

#2

Olá John L. Obrigado por compartilhar, não sabia que dava para fazer essa customização.
Testei e achei muito bom mesmo!!!

#3

Ótima dica. Obrigado por compartilhar, John!!!

#4

Legal, obrigado e continue nos ajudando a melhorar… Essa é uma troca onde todo mundo ganha!!

#5

Quem poder colocar o Print de como ficou após as modificações, seria interessante.

#6

Na verdade não é que ficou um css de outro mundo, o que achei interessante é que pelo input do tema ele reconhece o css definido.
Você pode customizar do jeito que quiser, já tinha tentado aplicar como style nos eventos e não dava para alterar e dessa maneira dá! Você pode ir inspecionando elemento e customizando tudo por esse input.

Já alterei de acordo com o meu esquema de cores

#7

Sim esta na hora de liberar na própria interface do SC para importar os Temas do Bootstrap diretamente.