Is there an easy way to style events by project category in FullCalendar from JSON feed? - Stack Overflow

admin管理员组

文章数量:1122832

I was looking around to style events in Fullcalendar from a JSON feed, where I wanted to assign different colors to different projects. I started with simple eventSources, where I devided my data in two regional categories (north and south) using extraParams and styled them acording my needs. This worked fine, but couldn't be the way to manage around 40 different projects.

So I wonder how this could be done in an easy way?

I was looking around to style events in Fullcalendar from a JSON feed, where I wanted to assign different colors to different projects. I started with simple eventSources, where I devided my data in two regional categories (north and south) using extraParams and styled them acording my needs. This worked fine, but couldn't be the way to manage around 40 different projects.

So I wonder how this could be done in an easy way?

• json
• fullcalendar

Share Improve this question Follow edited 1 hour ago geom asked Jan 3 at 21:02 geomgeom 42311 gold badge55 silver badges1818 bronze badges 3

• 1) this doesn't appear to be a question. Reminder: the tour, How to Ask. If you want to post some ready-made, working code, then either a) post a question describing your original problem, and then post a separate answer in the Answer box below it, describing how you solved it. To a search engine, and to other users looking for answers, this currently appears to be an unanswered question! So you won't help many people this way. Or b) delete this and go make a blog post or a github gist or something. – ADyson Commented 2 days ago
• 2) I wan't to report this here since the documentation in FullCalendar does not mention this possibility...yes, it does: fullcalendar.io/docs/event-parsing clearly describes the color and textColor properties you've mentioned (and some other colour properties) saying that they can be used to set the colours of individual events. It's also mentioned here that you can do the same per event-source, if someone prefers, or here for the whole calendar. – ADyson Commented 2 days ago
• P.S. Your SQL query is highly vulnerable to SQL injection attacks (and just to simple syntax errors caused by unescaped values). You are strongly recommended to use prepared statements and parameterised queries instead of directly including client-side input values into your SQL strings. This should be a priority update. See php.net/manual/en/function.pg-prepare.php and php.net/manual/en/function.pg-execute.php – ADyson Commented 2 days ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

After my first post, I realized, that I could adapt my JSON feed to include colors and textcolors by project categories, so that Fullcalendar could use them to style all events. This behavoir is mentioned in the documentation from Fullcalendar, as ADyson commented kindly, but I didn't understand it immediately. So thanks to ADyson for help and comments to clarify things.

So here just the code I used to realise this:

   events: {
          url: 'https://example.com/data/get_events_json.php',
   },

Here the part of the php script to produce the JSON feed:

<?php
# Connect to PostgreSQL database
require("../database/db_settings.php");

# Retrive URL variables
if (empty($_GET['start'])) { 
    echo "Start date missing!";
    exit;
} else
    $start = $_GET['start'];

if (empty($_GET['end'])) { 
    echo "End date missing";
    exit;
} else
    $end = $_GET['end'];

# Query string with color and "textColor" to style events in Fullcalendar
$sql = "select id, title, start, \"end\", color, \"textColor\" from events where start >='" . $start . "' and \"end\" <= '" . $end ."'";

# Try query or error
$rs = pg_query($db_handle, $sql);

if (!$rs) {
    echo "An SQL error occured.\n ";
    echo $sql;
    exit;
} elseif (pg_fetch_all($rs) == false) {
     $resultArray = [];
} else {
     $resultArray = pg_fetch_all($rs);
}

//echo $output;
echo json_encode($resultArray);
?>    

The JSON feed looks like this:

[{
    "id":"5014",
    "title":"1 (5014)",
    "start":"2025-01-02",
    "end":"2025-01-03",
    "color":"lightgray",
    "textColor":"black"
},
{
    "id":"5012",
    "title":"2 (5012)",
    "start":"2025-01-03",
    "end":"2025-01-07",
    "color":"slateblue",
    "textColor":"white"
},
{
    "id":"6080",
    "title":"1 (6080)",
    "start":"2025-01-13",
    "end":"2025-01-15",
    "color":"lightgray",
    "textColor":"black"
}]

Here the result: Numbers are ids from projects (instead of project names) so they all get the same color, whereas numbers inside parentheses are ids from different project actions.

本文标签： Is there an easy way to style events by project category in FullCalendar from JSON feedStack Overflow