Adjust the badge color on the zabuto calendar

I am working on a website with a zabuto calendar that loads events through an ajax call. Each event on the calendar is currently represented by a yellow badge. I am wondering if there is a way to customize or change the color of these badges?

Below is the code snippet I am currently using:

<div id="my-calendar"></div>
    <script type="application/javascript">
        $(document).ready(function () {
            $("#my-calendar").zabuto_calendar({
                today: true,
                language: "es",
                ajax: {
                    url: "<?php echo base_url();?>index.php/client/build_date/",
                    modal: true
                }
            });
       });
   </script>

Any advice or suggestions would be greatly appreciated. Thank you in advance!

Answer №1

To customize the default colors, utilize CSS !important. Here's a sample for customizing the calendar:

.event.event-clickable{   //modify clickable event color
   background-color: blue !important; //customize color
}

.badge.badge-event{       //adjust badge color
  background-color: red !important; //customize color
}

Answer №2

Here is another illustration:

let currentDate = (new Date()).toISOString().split("T")[0];

let eventList = [{
  "date": currentDate,
  "badge": true,
  "title": currentDate
}, ];

// setting up the calendar upon loading
$("#my-calendar").zabuto_calendar({
  legend: [{
    type: "text",
    label: "Special event",
    badge: "00"
  }],
  data: eventList,
  cell_border: true,
  show_previous: 2,
  show_next: 2,
  weekstartson: 0,
  nav_icon: {
    prev: '<i class="fa fa-chevron-circle-left"></i>',
    next: '<i class="fa fa-chevron-circle-right"></i>'
  }
});
div.zabuto_calendar .badge-event,
div.zabuto_calendar div.legend span.badge-event {
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%) !important;
  color: #fff;
  text-shadow: none;
}

div.zabuto_calendar .table tr td.event div.day,
div.zabuto_calendar ul.legend li.event {
  background-color: #AEEEFF !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.3/zabuto_calendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.3/zabuto_calendar.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="my-calendar"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Need a guide to identify HTML elements with a particular attribute?

I attempted to find this information online, but I wasn't successful. Suppose I am interested in knowing all the HTML elements that contain a "background" attribute. I'm aware that some web browsers may not support certain elements. Off the top ...

On the second attempt, Firefox is able to drag the div element smoothly by itself

I have created a slider resembling volume controls for players using jQuery. However, I am facing an issue ONLY IN FIREFOX. When I drag the slider for the second time, the browser itself drags the div as if dragging images. The problem disappears if I clic ...

Animating the Three.js Globe camera when a button is clicked

Struggling to create smooth camera movement between two points, trying to implement the function below. Currently working with the Globe from Chrome Experiments. function changeCountry(lat, lng) { var phi = (90 - lat) * Math.PI / 180; var theta = ...

Determining the value of an object property by referencing another property

Upon running the code below, I encounter the following error message: Uncaught TypeError: Cannot read property 'theTests' of undefined $(document).ready(function() { var Example = {}; Example = { settings: { theTests: $(&apo ...

Switching between Login Form and Register Form in VueJS template

Recently, I attempted to switch between the 'Login Form' and 'Register Form' using code that I found on codepen Flat HTML5/CSS3 Login Form. While the code functioned properly on its own, when integrated into a Vue Template, the form fai ...

Ensure NodeJS/JSDom waits for complete rendering before performing scraping operations

I am currently facing an issue with scraping data from a website that requires login credentials. When I try to do this using JSDom/NodeJS, the results are inconsistent compared to using a web browser like Firefox. Specifically, I am unable to locate the l ...

Receiving an Http302 response after attempting to post data using Ajax in a Django view

I am currently working on creating a web application that utilizes ajax for input. The input is then sent to the Django server-side, but I am experiencing difficulties with redirecting the URL properly. It seems that the issue may be related to the Django ...

Tips on retrieving a specified string from within an array of strings

I need help extracting the inner string from this array within a string: '["sgrdalal21"]' Can someone provide guidance on how to accomplish this? ...

AngularJS combined with jVectorMap allows for the seamless rendering of small interactive

I am facing a similar issue to one discussed here, but with some minor differences. Initially, my map loaded without any problem on the site. However, after adding Angularjs to the site, I noticed a 'small' map issue. It seems like a simple code ...

The functionality of Jquery and JS lies in working on DOM elements as opposed to

Just to start off, I want to mention that my knowledge of JavaScript and specifically jQuery is quite limited. I've encountered an issue with some JavaScript and jQuery loading on my webpage. 1) I have written some code on JSFiddle http://jsfiddle.n ...

Aligning a bootstrap grid in the center for mobile devices

I've encountered an issue where my 2×3 grid of images and text is perfectly centered on desktop but has a strange offset on mobile devices. Here's how it appears on the desktop: https://i.sstatic.net/HXqFq.jpg and here's the layout on mob ...

Tips for connecting a suspended div below a Bootstrap 5 fixed navigation bar

I successfully implemented a sticky navigation using Bootstrap 5, and now I want to add a hanging div (.chat-tag) below the sticky nav for a chat feature. This "hanging tag" should stay attached to the sticky nav as the user scrolls down the page. It&apos ...

Pagination in Datatables

Here is the code snippet I am working with: $('#ldap-users, #audit-users').dataTable({ "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p& ...

Styling Lists in HTML/CSS: How to Highlight an Entire Row with a Background Color When Using list-style?

I've been working on revamping the menu layout on my website. Currently, I am using a list with a circle style type to display the menu options. Here's a glimpse: Here is the code snippet: <li class='category'><a href=' ...

Implementing event handling with .On() in Jquery following .Off()

I need assistance with my responsive navigation bar. I am having trouble with the jQuery code to disable hover events if the width is less than or equal to 768px and enable it for desktop screens. $(window).on('load resize', function (e) { v ...

Tips for preventing my text from disappearing off the screen when I resize it

Hello there and thanks in advance. I've recently delved into the world of HTML and CSS and I'm currently in the process of building my own website. I've encountered an issue with a div container where I'm utilizing Bootstrap elements. T ...

Tips for preserving the horizontal scroll position of a div following a toggle using the "blind" effect

My intention is to replicate the functionality demonstrated here: http://jsfiddle.net/cbp4N/17/ $('#cbxShowHide').click(function(){ if(this.checked) { $('#block').show('fast',function() { $(this).scrol ...

Accessing values from an array within a JSON object using jqGrid

Here is an example of my JSON data: [{"codDiretor":"123", "nomeDiretor":"Nome do Diretor", "data":"29/01/2014", "documentos":[{"codDocumento":"1", "nomeDocumento":"Primeiro Doc"}, {"codDocumento":"2","nomeDocumento":"Segundo Doc"}] ...

What is the process for refreshing and creating new markers on a Leaflet map?

Recently, I came across Leaflet and decided to use it instead of Google Maps. I have an API that I want to use for generating and updating map markers to prevent having multiple markers. I've been working on a project which you can view in this fiddle ...

"Troubleshooting: Why is my jQuery .load function returning an empty div when

Currently, I am developing a PHP control panel and I need a div in one of my PHP files to automatically refresh. After researching, I found a jQuery solution that can reload specific parts of a website automatically. However, the issue I am facing is that ...