Here’s a calendar dialog CSS hack.

It completely changes the default look:

With a brand new look:

Simply go to your scripts section, add a new script.

And paste this code:

<style>
  .btn.btn-default.btn-sm{
  	border-color: white !important;
    padding: 10px !important;
    font-size: 16px !important;
  }
  .btn.btn-default.btn-sm:hover{
  	background-color: #cce6ff !important;
  }
  .btn.btn-default.btn-sm.pull-left::after{
      	content: "<" !important;
    font-size: 20px !important;
    font-weight: normal !important;
  }
  .btn.btn-default.btn-sm.pull-left{
    position: relative;
  	left: 220px !important;
  }
	.btn.btn-default.btn-sm.pull-right{
    position: relative;
  	left: -20px !important;
  }

  
  
  .glyphicon.glyphicon-chevron-left{
   display: none !important;
  }
    .btn.btn-default.btn-sm.pull-right::after{
  	content: ">" !important;
    font-size: 20px !important;
      font-weight: normal !important;
      	
  }
  .glyphicon.glyphicon-chevron-right{
  	display: none !important;
  }
  .btn-group-sm>.btn, .btn-sm {
    border-radius: 36px;
  }
  .text-center.h6.ng-scope{
    visibility:hidden !important;
  }
  .text-center.ng-scope{
    position: relative;
  	left: -20px !important;
  }
  .btn-group.pull-left{
  	display: none !important;
  }
  .btn.btn-sm.btn-success.pull-right.ng-binding{
  	display: none !important;
  }
 *:focus {outline:none}
  th.text-center.ng-scope{
  	text-transform: uppercase !important;
    font-weight: normal !important;
  }
 
  #datepicker-27-8723-title, .ng-binding{
  	font-weight: normal !important;
   
  }
  th:nth-child(2) .btn.btn-default.btn-sm{
  	pointer-events: none !important;
  }
  
  th .btn.btn-default.btn-sm{
    position: relative !important;
    left: -25px !important;
  	width: auto !important;
    
  }
	.ng-binding.text-muted{
  	color: #ddd !important;
  }
  .btn-group-sm>.btn, .btn-sm{
  	line-height: unset !important;
  }
	.btn-group-sm>.btn, .btn-sm:hover{
  	line-height: unset !important;
  }
 
  .btn-default.focus, .btn-default:focus{
  	background-color: white !important;
  }
  .btn:after{
    content: none !important;
    background-color: transparent !important;
  opacity: 1 !important;
  transform: none !important;
  }
  
</style>

You can see a live demo here:

https://aubrey-bourke.leadshook.com/survey/o0WdA4DFuFPtPPIdHKwYq9ZSyEx4jjpyuDVILjTz

Leave a Reply

Your email address will not be published. Required fields are marked *