Home FullCalendar How to add backgroundColor to full calendar event with php mysql?

How to add backgroundColor to full calendar event with php mysql?

by therichpost

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to add backgroundColor to full calendar event with php mysql?  fullcalendar is the best A JavaScript event calendar. Customizable and open source.

In this post, we will get or fetch fullcalendar events with background color from php mysql database.

In this, on day click, bootstrap popup will open including add event title form and with the help of this form, will insert the event title, event backgroundColor and date in mysql database.

Here is the complete working code:

Very first, you need to create event table in phpmyadmin and I am also inserting some test data and here is table structure:
title varchar(250) NULL,
backgroundColor varchar(250) NULL,
event_date timestamp NULL
INSERT INTO `events` (`id`, `title`, `backgroundColor`, `event_date`) VALUES
(1, 'Walk-In', '#000000', '2018-06-5 11:07:27'),
(2, 'Online Booking', '#000000', '2018-06-6 02:37:05'),
(3, 'Facebook Booking', '#000000', '2018-06-7 04:01:00')
 Here is the complete code to Add backgroundColor to full calendar event with php mysql and you can paste that code into your php file:
$servername = "localhost";
$username   = "root";
$password   = "root";
$dbname     = "calendar";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
if(isset($_POST["submit"]) == "submit" && isset($_POST["eventTitle"]) != "")
    $sql = "INSERT INTO events (title, event_date, backgroundColor)
        VALUES ('".$_POST['eventTitle']."', '".$_POST['eventDate']."', '".$_POST['eventColor']."')";
    if (mysqli_query($conn,$sql)) {
        echo "New event added successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;

  //echo "Connected successfully";
$sql = "SELECT title, event_date as start, backgroundColor FROM events";
$result = mysqli_query($conn,$sql); 
$myArray = array();
if ($result->num_rows > 0) {
// output data of each row
    while($row = $result->fetch_assoc()) {
        $myArray[] = $row;

    echo "0 results";
<!DOCTYPE html>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min

  $(document).ready(function() {
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      defaultDate: new Date(),
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      dayClick: function(date, jsEvent, view) {


      events: <?php echo json_encode($myArray); ?>



  body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;

  #calendar {
    max-width: 900px;
    margin: 0 auto;


  <div id='calendar'></div>
  <div class="modal fade" id="successModal" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
  <div class="modal-body">
    <form action="#" method="post">
    <div class="form-group">
      <label for="eventtitle">Event Title:</label>
      <input type="text" name="eventTitle" class="form-control" id="eventTitle" required="">
      <input type="color" name="eventColor" class="form-control" id="eventColor" required="">
      <input type="hidden" name="eventDate" class="form-control" id="eventDate">
    <button type="submit" value="submit" name="submit" class="btn btn-default">Submit</button>


 If you have any query related to this post then please let me know with your comments and I will come with more fullcalendar posts.

You may also like


Ronaldo de Lélis June 22, 2018 - 1:49 am

How to color different events in fullcalendar? based on an option … example: I have 3 sellers, I want each seller to have his own color when clicking on the day to register an event, that he chooses through a modal. This mode is the Event registration screen, where the seller chooses the Title, the name of the Seller, the start date and the end date …. when to choose the seller A the color in fullcalendar should be red, when choosing the Seller B the color should be blue and when choosing the Vendor C the color should be green … thank you very much already.

therichpost June 22, 2018 - 4:55 pm

you can try above code..hope this helps

siti October 28, 2019 - 12:58 pm

How to do when we picked the color, the color will display first,

Ajay Malhotra October 28, 2019 - 1:03 pm

I did not get your question properly.

Alcher January 24, 2020 - 10:31 pm

How to use fullcalendar in angularjs, and the process is with php mysqli.

Ajay Malhotra January 27, 2020 - 4:46 pm

I will share the post link.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.