Event icon in Full Calendar using Asp.net C#

Question

1.00/5 (1 vote)

See more:

Hi Friends,

I am looking forward to develop a Full Calendar which should fetch data like event title, message, description from database and display it in Calendar, (Example: if there are 3 events on same day then in calendar it should look like this " eventicon- 3 " ) any body can suggest me any API or working code to achieve this will be much appreciated.

Thanks a lot in advance.

JavaScript

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var calendar = $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        eventClick: updateEvent,
        selectable: true,
        selectHelper: true,
        select: selectDate,
        editable: true,
        events: "JsonResponse.ashx",
        eventDrop: eventDropped,
        eventResize: eventResized,
        eventRender: function(event, element,calEvent) {

            //here i am adding icon next to title

            element.find(".fc-event-title").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"images/msg.png\" />"));


            // here description position

            element.qtip({
                content: event.description,
                position: { corner: { tooltip: 'bottomLeft', target: 'topRight'} },
                style: {
                    border: {
                        width: 1,
                        radius: 3,
                        color: '#2779AA'

                    },
                    padding: 10,
                    textAlign: 'center',
                    tip: true, // Give it a speech bubble tip with automatic corner detection
                    name: 'cream' // Style it according to the preset 'cream' style
                }
            });

        }
    });

});

Posted 26-Feb-14 0:02am

Mohammed_Faisal_Majeed

Updated 2-Mar-14 23:54pm

Ahmed Bensaid

v6

Add a Solution

Comments

ZurdoDev 26-Feb-14 7:53am

What do you want? Are you going to build the UI for the calendar? Or you could search online for existing calendar controls.

[no name] 27-Feb-14 3:08am

Actually i searched for exiting calendar with this features .. but i did not get it ...
Now i need to implement please help!

[no name] 27-Feb-14 3:21am

i want to retrieve messages from database and display in calendar.
lets imagine there are 4 meassages in database on same day 27/02/2014, then in calendar it should be like
[ message icon - 4 ] so when we click on this we should get that 4 messages in popup or window

ZurdoDev 27-Feb-14 7:19am

Every calendar control will likely support it. But you'll have to write the code to get the values from the database and then the calendar control will likely have a method to add events.

[no name] 27-Feb-14 7:29am

i have already a calendar which is displaying events name in the calendar .. but i need notification with icon instead of name

ZurdoDev 27-Feb-14 7:42am

What does that mean exactly? You just want an icon instead of name? Perhaps find a different calendar control.

[no name] 27-Feb-14 8:35am

Yes i want icon instead of name ... icon with number of messages

ZurdoDev 27-Feb-14 8:36am

If that calendar control does not support that you'll need to find a different one.

[no name] 27-Feb-14 8:38am

if u have any working code can u help me

ZurdoDev 27-Feb-14 8:40am

I don't have any calendar controls. But I'm sure there are many available that can support icons.

[no name] 27-Feb-14 8:35am

i am not getting any such code with icon with number

Ahmed Bensaid 27-Feb-14 11:25am

Maybe you could use FullCalendar jQuery plugin to achieve that.
http://arshaw.com/fullcalendar/
http://stackoverflow.com/questions/3750521/add-icons-in-first-line-of-an-event-fullcalendar
http://stackoverflow.com/questions/11961709/how-to-add-image-to-specific-events-jquery-full-calendar

[no name] 28-Feb-14 1:15am

thanks Ahmed , this links are good .. but i am still not able to get my output..

Ahmed Bensaid 28-Feb-14 4:49am

You're welcome. I advise you to explore FullCalendar jQuery plugin documentation ;)
With some searches, I think you could achieve what you want with this plugin.

[no name] 28-Feb-14 5:08am

Half i have achieved but still half is remaining ... can u help me

Ahmed Bensaid 28-Feb-14 5:41am

What did you achieve ? And what remains to do ?

[no name] 28-Feb-14 5:54am

In a table i have stored messages, events and attendance based on date.
Ex: if i have 2 messages and 1 attendance and 1 event on same date, then in calendar on that date i want 3 icons -
messageicon-2
attendanceicon-1
event-1
and wen i click it should show the description.

what i have achieved is
only one messageicon-2

remaining attendance and event icon i am not getting ..

hope u understood :)

Ahmed Bensaid 28-Feb-14 6:24am

I understand. Can you post your code ? So, I'll test it and will help you this night when I'll be at home, or maybe this week-end :)
PS : Edit your question to add your code ;)

[no name] 3-Mar-14 3:24am

Sorry for the late reply Ahmed .. r u there

Ahmed Bensaid 3-Mar-14 3:42am

No problem, I'm here ;)

[no name] 3-Mar-14 3:57am

now i am displaying message count in calendar on that particular day but now i should put icon next to that count

[no name] 3-Mar-14 4:19am

will u help me to put icon

[no name] 3-Mar-14 4:21am

for different messaage title i need different icon next to the count
Ex:
Message icon for message
Event icon for Event

in my code only one icon is repeating for all the message title

Ahmed Bensaid 3-Mar-14 5:21am

Can I see your code ?

[no name] 3-Mar-14 5:36am

Ahmed Bensaid 3-Mar-14 5:54am

Next time, if someone asks you for source code, add it to your answer by clicking "Improve question" ;)

Ahmed Bensaid 3-Mar-14 6:06am

Add a className to your events objects.
http://arshaw.com/fullcalendar/docs/event_data/Event_Object/
Then, in your eventRender implementation, you could test the className field of event object. And add image following this field, for example with a switch ... case ;)

[no name] 3-Mar-14 6:19am

can u help me in this i am bit confused

Ahmed Bensaid 3-Mar-14 6:34am

You have a full example in CodeProject but it's in MVC :
http://www.codeproject.com/Articles/638674/Full-calendar-A-complete-web-diary-system-for-jQue
Otherwise, I think you've got a table with events in your database. Do you have a "Type" field with event's type (message, event, ...) ?

[no name] 3-Mar-14 6:55am

Yes i have filed name by operation

Ahmed Bensaid 3-Mar-14 8:10am

When you retrieve events from database and build events objects, set this 'type' column to the className field of FullCalendar Event object. Do you understand ?

[no name] 4-Mar-14 0:05am

YES I UNDERSTOOD BUT how do i assign each event separate icon :( not getting

Ahmed Bensaid 5-Mar-14 7:40am

With something like this :
//here i am adding icon next to title
switch(event.className) {
case "msg" :
element.find(".fc-event-title").after($("").html("<img src=\"images/msg.png\" />"));
break;
case "event" :
element.find(".fc-event-title").after($("").html("<img src=\"images/event.png\" />"));
break;
}

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mohammed_Faisal_Majeed · Accepted Answer · 2014-03-04T20:19:00

C#

var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        eventClick: updateEvent,
        selectable: true,
        selectHelper: true,
        select: selectDate,
        editable: true,
        events: "/JsonResponse.ashx",
        eventDrop: eventDropped,
        eventResize: eventResized,
        eventRender: function (event, element) {
            debugger;
            if ((event.description).toString() == "Message")
            {
            element.find(".fc-event-time").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/msg.png\" width='20px'/>" ));
        }
        if ((event.description).toString() == "Attendance") {
            element.find(".fc-event-time").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/attendance.png\" width='20px'/>"));
        }
        if ((event.description).toString() == "Event") {
            element.find(".fc-event-time").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/event.png\" width='20px'/>"));
        }
        if ((event.description).toString() == "Joined") {
            element.find(".fc-event-time").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/joined.png\" width='20px'/>"));
        }
        if ((event.description).toString() == "Result") {
            element.find(".fc-event-time").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/Results.png\" width='20px'/>"));
        }
            element.qtip({
                content: event.description,
                position: { corner: { tooltip: 'bottomLeft', target: 'topRight'} },
                style: {
                    border: {
                        width: 1,
                        radius: 3,
                        color: '#2779AA'

                    },
                    padding: 10,
                    textAlign: 'center',
                    tip: true, // Give it a speech bubble tip with automatic corner detection
                    name: 'cream' // Style it according to the preset 'cream' style
                }

            });

        }

    });

});