This forum is closed to new posts and responses. New discussions are now taking place in the IBM Developer Answers forum.



Jun 12, 2018, 7:56 AM
13 Posts

Bootstrap Calendar View

  • Category: Custom JSF code (Eclipse IDE)
  • Platform: Windows
  • Release: All
  • Role: Developer
  • Tags:
  • Replies: 6

Hi All,

Is there any good sample database to show bootstrap calendar view with data (like room bookings, meetings or reservations).

Thanks

 

Jun 13, 2018, 11:12 AM
300 Posts
I have used Full Calendar
I have used Full Calendar in a project https://fullcalendar.io/ and that works great.

Tied it to Notes data via JSON supplied by Java/XPage combo.

Howard
Jun 14, 2018, 2:17 PM
13 Posts
Bootstrap Calendar View

Thanks Howard.

 

Is there any Grid type calendar with in XPages ?

Now i want to show data like a categorized with with Month and Year (similar to calendar).

 

Thanks

 

Jun 15, 2018, 1:28 AM
13 Posts
Bootstrap Calendar View

Thanks Howard !!

Looks like FullCalendario works for me. Why you use Java to supply json data. Does Rest services component will not work for it.

Can you share a sample database, that will help me.

I am getting the following error: SCRIPT5007: The value of the property '$' is null or undefined, not a Function object.

Can you suggest me what to do.

 

 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.resources>
        <xp:styleSheet href="/fullcalendar.min.css"></xp:styleSheet>
        <xp:styleSheet href="/fullcalendar.print.min.css"></xp:styleSheet>        
        <xp:script src="moment.min.js" clientSide="true"></xp:script>
        <xp:script src="jquery.min.js" clientSide="true"></xp:script>        
        
        <xp:script src="fullcalendar.min.js" clientSide="true"></xp:script>
        

        

        <xp:styleSheet href="/xPageStyle.css"></xp:styleSheet>
    </xp:this.resources>
    
    <xp:this.beforeRenderResponse><![CDATA[#{javascript:
var exCon = facesContext.getExternalContext();
var response = exCon.getResponse();
response.setHeader("X-UA-Compatible", "IE=10");

}]]></xp:this.beforeRenderResponse>
    <div id="calendar"></div>
    <xp:scriptBlock id="scriptValidation">
        <xp:this.value><![CDATA[$(document).ready(function() {

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'listDay,listWeek,month'
      },

      // customize the button names,
      // otherwise they'd all just say "list"
      views: {
        listDay: { buttonText: 'list day' },
        listWeek: { buttonText: 'list week' }
      },

      defaultView: 'listWeek',
      defaultDate: '2018-03-12',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2018-03-01'
        },
        {
          title: 'Long Event',
          start: '2018-03-07',
          end: '2018-03-10'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2018-03-09T16:00:00'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2018-03-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2018-03-11',
          end: '2018-03-13'
        },
        {
          title: 'Meeting',
          start: '2018-03-12T10:30:00',
          end: '2018-03-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2018-03-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2018-03-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2018-03-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2018-03-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2018-03-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2018-03-28'
        }
      ]
    });

  });]]></xp:this.value>
    </xp:scriptBlock></xp:view>

Thanks

 

 

Jun 15, 2018, 5:58 PM
300 Posts
comment
I use JSON since Full Calendar passes query strings that define the start and end date of what data they need to display in the calendar. I also look at the current user to only send the entries they should be seeing. Finally, the JSON has attributes to define the colors.

Howard
Jun 15, 2018, 10:48 PM
13 Posts
Thanks Howard

 

Thanks Howard !!. FullCalendar worked for me..:)

 

 


This forum is closed to new posts and responses. New discussions are now taking place in the IBM Developer Answers forum.