Event Dashboard User Guide

Using the Interface


Events Dashboard View


While viewing the current list of events, you will see the following columns:

Status
The colored circles in this column are a visual representation of how the close the event is to reaching its attendance capacity.
Start Date/Time
This column displays the date and time when each event will begin.
Title
This column displays the name of each event.
In Person
What do these numbers mean? “0/0/0/0” Example: “24/0/19/40” == “24 Registered / 0 Waitlisted / 19 Attended / 40 Max. Attendance”
Webcast
What do these numbers mean? “0/0/0/0” Example: “24/0/19/40” == “24 Registered / 0 Waitlisted / 19 Attended / 40 Max. Attendance”
Total Att
This column displays the number of people that actually attended each event.
Pers
This column displays the number of CTL personnel that attended each event.

Action Dropdown List

Event Preview
Clicking this will take you to the CTL website to view more information about the event.
Edit Record
Clicking this will produce the dialog box for editing information about the event.
View/Edit Registrations
Clicking this will take you to a page displaying information about attendees registered for the event.
  • Registered
  • Last/First Name
  • Email
  • School
  • Department
  • Reg. Type
Export to Excel
Clicking this will allow you to save the registrants in the current list to a Microsoft Excel file on your computer.
Add Registration
Clicking this will display a dialog box allowing you to manually add a registration for the event.
Print Name Tags
Clicking this will display the names of attendees in a large format for printing name tags.
Print Attendance Sheet
Clicking this will display a printable page for taking attendance at the event.
Take Attendance
Clicking this will display a page for taking attendance online.
View/Edit Attendance
Clicking this will display a page with a list of attendees where you may manually add or delete attendance records. Export to Excel Clicking this will allow you to save the events in the current list to a Microsoft Excel file on your computer. Override Attendance Clicking this will display the dialog box that allows you to manually enter the number of attendees. Add Attendee Clicking this will display a dialog box allowing you to manually add an attendee to the event.
Registration Table Check-In
Clicking this will take you to a page that displays an interface for allowing attendees to check-in when they arrive at the event registration table. This view has been optimized for use on a tablet i.e. iPad, Surface, Galaxy Tab, etc.
Cancel Schedule
Clicking this will display the dialog box for editing information about the event and will show “Section 5” for cancelling the event.
Delete Schedule
Clicking this will immediately delete the event and manually override the actions that are usually completed when an event is “cancelled.” i.e. cancellation emails will not be sent

Export to Excel

Clicking this will allow you to save the events in the current list to a Microsoft Excel file on your computer.

Add New Event

Clicking this will display the dialog box for creating a new event.


Client View


Search

You are able to enter a last and/or first name in this field to search for clients that are able to register for events.

List of clients

Approved
This column denotes whether or not the client is approved to register for events.
Name
These columns display the name of the client.
Email
This column displays the email address of the client.
Notes
This column displays any notes about the client that may have been added when the client’s account was requested or processed.

Add new record

Clicking this will display a dialog box for requesting that a new client be added (so that they may register for events).


Event Search View


On this screen, you may search the catalog of future and past events stored in the system. The information displayed on this screen is formatted in the same fashion as the Events Dashboard.

Preset

This dropdown list allows you to store your search parameters so that you may easily recall and use them in the future.
Save As Preset
Clicking this button will save any of the information that you have entered or changed in any of the search fields. You will be prompted to enter a name for your Preset.

Internal Presenter

This field allows you to enter the name of a faculty or staff member to search for events in which they are a presenter. Example : Michael Trilus

Search String

This field allows you to enter search terms or keywords that will be used to find events based on the following information:
Event Description
Example : update registration information for event
Event Organizer
Example : Michael Trilus
Presenters at the event
Example : Michael Trilus
The title of the event
Example : Using the CTL Event Registration System: A Brief Tutorial
The location of the event
Example : UL1125M or Online or University Faculty Club

Type

This dropdown list allows you to choose which type of information will be searched with the keywords that you have entered in the Search String field.

Date Range

These fields allow you to select a range of dates for events to be searched.

Export to Excel

Clicking this after you have completed a search will allow you to save the events in the current list to a Microsoft Excel file on your computer.


Creating a New Event

You can use this section to step through the process of creating a new event in the system.

Section 1 – Information

On this screen, you should enter all applicable general information for your event. Please be specific.

What is the name/title of the event?

Example : Using the CTL Event Registration System: A Brief Tutorial

Who is the primary organizer or contact for this event?

Example : Michael Trilus

What is the email of the primary organizer or contact for this event?

Example : trilusm@iu.edu

If the registration is being hosted on another website, what is the URL?

In some cases, you may decide to use another website to register users for your event; please enter the URL in this field. Example : https://www.eventbrite.com

If more information is located at a specific URL, what is the URL?

In some cases, you may have information displayed on another website which your registrants may need to view; please enter the URL in this field. Example : https://cpltl.iupui.edu

If you want to send registrants to another website after registering, what is the URL?

You may redirect your registrants to another website after the registration process has been completed; please enter the URL in this field. Example : https://academicaffairs.iupui.edu

Enter a description of the event to go on the website

Variable Legend

Section 2 - Advertising/Reg

On this screen, you will enter several important details about the format of your event, advertising information, and registration deadlines.

Do you want this event to show up on the website?

This option allows you to show or hide the event on the CTL website.

What type of event is this?

This dropdown list allows you select the format of your event. If you choose “recorded event,” you must set an expiration date for the recording.

Do attendees/viewers need to register before the event?

These options will change to match the type of event you chose in the previous box.

How many minutes/hours do you want to close registration before the event?

This dropdown list allows you to select a deadline for registering for the event. Clients will not be able to register online for this event after the time you select.

Is this an IT or IDD event?

This dropdown list allows you to select

Event Tags

In this field, you may enter keywords that will be used to help users search for your event.

Section 3 - Schedule

On this screen, you should enter all applicable information for each presenter. You can create multiple “schedules” for each event. Thus, you are able to make recurring events or schedule an event to be presented in-person at one time and online at different times.

If someone from IU/IUPUI is presenting, select the name(s) from the box below…

In this field, you may enter the name, username, or email address to search for a staff or faculty member in the IU/IUPUI system. Example : Michael Trilus or trilusm or trilusm@iu.edu This field may also be referred to as Internal Presenter.

Enter any presenters that are not in the IU/IUPUI system…

In this field, you may manually enter the name of anyone presenting that is not a part of IU or IUPUI. Example : Nikola Tesla This field may also be referred to as External Presenter.

Where is this event being held?

You should enter the building and room number in this field for in-person events. Example : UL1125M or ET014 You should also enter the address of the building if it is not a campus building. You should enter “Online – Adobe Connect” for online/webcast events.

Enter the maximum number of people that can attend in-person/online…

The options displayed here are dependent on the event format chosen on the previous screen. If you chose a dual-format event, both in-person and online options will be displayed.

Enter the maximum number of people that can be added to the in-person/online waitlist…

The options displayed here are dependent on the event format chosen on the previous screen. If you chose a dual-format event, both in-person and online options will be displayed.

Start/End Date/Time

Please set when your event will begin and end. For multi-day events, be sure to create a schedule for each day of the event.

Schedule(s)

After you have entered the correct information, you should click the “add schedule” button. The information will be cleared from the fields and stored in the box at the bottom of the screen. You may now enter information for another schedule of the same event. i.e. creating a replayed online/webcast event for an in-person event You may delete stored schedules by clicking the small “X” on the left side of the stored schedule.

 Note: Deleting a stored schedule will also delete any registrations assigned to it.

If you wish to change the date or time for your event, please do not delete the current schedule. Instead, please edit the already active schedule to reflect your changes.

Section 4 - Messaging

On this screen, you are able to create and store custom messages that will be shown/sent to a user after certain actions in the event registration process are completed.

Message Type

Confirmation email for an in-person event registration
This message will send an email to the user after they have completed the registration process for an in-person event.
Confirmation email for a webcast registration
This message will send an email to the user after they have completed the registration process for an online/webcast event.
Website message when about to be waitlisted
This message will be displayed during the registration process if the event registration has reached maximum capacity, informing the user that they will be placed on the waitlist.
Confirmation email for a waitlist registration
This message will send an email to the user after they have completed the registration process if they have been added to the waitlist for any event.
Reminder email
You can enter how many hours before the event you would like a reminder email to be sent to all registrants. This message will send an email to all registrants the specified number of hours before the event.
Website change notice
This message will display on the website when there is a change to the event information.
Email change notice
This message will send an email to all registrants when there is a change to the event.
Post-event email
This message will send an email to all registrants after the event is over. Registrants will receive this email message even if they did not attend.

Survey URL

If you have a survey that registrants can complete after the event, please enter the URL of that survey in this field.

Resource URL

If you have resources or informational materials that registrants may need/want for the event, please enter the URL or location of those materials in this field.

Internal Notes

In this field, you may enter any useful comments that you may need to save. These notes are not visible to registering users.

Variable Legend

After complete each of the previously described sections, you must click the “Create Event” button at the bottom of the screen to save your event in the system.


Editing or Cancelling an Existing Event


After your event has been created, additional functions (listed below) will appear and are available for editing.

When any changes are made to event information, you must click the “Update Event” button at the bottom of the screen to save your changes.

Section 1 - Information

You have all the same options in this section that you did when you created the event. You may edit them at any time.

Section 2 - Advertising/Reg

Update Webcast URL

If you are providing a recording of your event after the event has finished, please enter the URL of the recording in this field.

Section 3 - Schedule

You have all the same options in this section that you did when you created the event. You may edit them at any time. You may delete stored schedules by clicking the small “X” on the left side of the stored schedule.

 Note: Deleting a stored schedule will also delete any registrations assigned to it.

If you wish to change the date or time for your event, please do not delete the current schedule. Instead, please edit the already active schedule to reflect your changes.

Section 4 - Messaging

Custom Quick Message

This message will not be stored after you leave the page. You can enter a message here to immediately send an email to registrants or attendees of the event. You can enter an email address from which the message will be sent.

Section 5 - Extras

Cancel Event

You may cancel your event by choosing “Yes.”

Create a message that you want to post on the website when the event is cancelled…

This message will display on the website after you cancel the event.

Create a message that you want to email the registrants when the event is cancelled…

This message will send an email to all registrants when after you cancel the event. You may choose to immediately send the email message directly from this screen. You may choose to enter a message that will be saved and used if you decide to cancel the event at a later date.

Should this event show up on any other websites that use this event system?

In the box, you may choose to add one or more websites that will display information about your event.

4 Developers

Upcoming Events


CSS

.eventWrapper{
    min-height: 400px;
}

.eventWrapper .grid-item p{
    font-size: 1rem;
}

.event-description{
    max-height: 390px;
    margin-bottom: 20px;
    overflow-y: auto;
}

.eventsTable p {
    font-size: inherit;
    font-weight: normal;
}

table.eventsTable tbody td {
    color: black; 
}

.eventIcon {
    display: inline-block;
}

.jtable-bottom-panel select {
    width: auto;
    height: auto;
}

.jtable-bottom-panel .jtable-left-area .jtable-page-list {
    font-size: 1rem;
}

table.eventsTable tbody tr:not(:last-child) {
    border-bottom: 1px solid rgb(221, 221, 221);
}

.eventsTable tbody {
    border-left: none;
    border-right: none;
}

table.eventsTable tbody tr:nth-child(even) {
    background-color: inherit;
    color: black; 
}
            

Javascript

<script src="//ctl.iupui.edu/Common/Scripts/AngularJS/angular.min.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Scripts/AngularJS/angular-sanitize.min.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/moment/min/moment.min.js" type="text/javascript"></script>
            

HTML

<div class="ng-cloak eventWrapper" id="wrapper" ng-app="remoteEventsListingApp" ng-cloak="ng-cloak">
   <div ng-controller="RemoteEventsListingController" class="grid halves">
      <div class="grid-item">
         <h3>Upcoming Events</h3>
         <table border="0" cellpadding="0" cellspacing="0" class="eventsTable">
            <tbody>
               <tr ng-repeat="event in events | limitTo:5">
                  <td class="eventDate" style="text-align: center;">{{event.StartDateTime | asDate | date:'MMM'}} {{event.StartDateTime | asDate | date:'d'}}</td>
                  <td>
                     <a href="/events/event-registration.html?eventid={{event.Id}}&amp;scheduleid={{event.ScheduleId}}"><span ng-bind-html="event.Title"></span></a>
                     <p>{{event.StartDateTime | asDate | date:'M/d, h:mm a'}}-{{event.EndDateTime | asDate | date:'h:mm a'}}</p>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

HTML with preview

<div class="ng-cloak eventWrapper" id="wrapper" ng-app="remoteEventsListingApp" ng-cloak="ng-cloak">
   <div ng-controller="RemoteEventsListingController" class='grid halves'>
      <div class='grid-item'>
         <h3>Upcoming Events</h3>
         <table border="0" cellpadding="0" cellspacing="0" class='eventsTable'>
            <tbody>
               <tr ng-repeat="event in events | limitTo:5">
                  <td class="eventDate" style="text-align: center;">{{event.StartDateTime | asDate | date:'MMM'}}
                     {{event.StartDateTime | asDate | date:'d'}}
                  </td>
                  <td>
                     <a href="/events/event-registration.html?eventid={{event.Id}}&amp;scheduleid={{event.ScheduleId}}"><span ng-bind-html="event.Title"></span></a>
                     <p>{{event.StartDateTime | asDate | date:'M/d, h:mm a'}}-{{event.EndDateTime | asDate | date:'h:mm a'}}</p>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
      <div class='grid-item'>
         <h3>Next Up</h3>
         <div ng-repeat="event in events | limitTo:1">
            <h4 ng-bind-html="event.Title"></h4>
            <h5>{{event.StartDateTime | asDate | date:'MMM d, h:mm a'}}-{{event.EndDateTime | asDate | date:'h:mm a'}}</h5>
            <div class='event-description' ng-bind-html="event.Description"></div>
            <a href="/events/event-registration.html?eventid={{event.Id}}&amp;scheduleid={{event.ScheduleId}}" class='button'>Go to Event Listing</a>
         </div>
      </div>
   </div>
</div>

Upcoming Events Table


CSS

div.jtable-main-container div.jtable-title {
    background: #7D110C;
}
            

Javascript

<script src="//ctl.iupui.edu/Common/Scripts/AngularJS/angular.min.js" type="text/javascript" defer></script>
<script src="//ctl.iupui.edu/Common/Scripts/AngularJS/angular-sanitize.min.js" type="text/javascript" defer></script>
<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/moment/min/moment.min.js" type="text/javascript" defer></script>
<script defer="defer" src="//ctl.iupui.edu/Common/Events/Scripts/remotesiteeventscript.js" type="text/javascript" defer></script>
<script type="text/javascript">
    var baseEvtUrl = "/CITLEvents/";        
    var summaryTitle = "CITL Events";
    var eventRegistrationPath = "/events/event-registration.html";
</script>
<script defer="defer" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/jquery.bpopup.min.js" type="text/javascript"></script>
<script defer="defer" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/jtable/jquery.jtable.js" type="text/javascript"></script>
<script defer="defer" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/jquery.cookie/js.cookie.js" type="text/javascript"></script>
<script defer="defer" src="//ctl.iupui.edu/Common/Events/Scripts/eventlisting.js" type="text/javascript"></script>

HTML - Upcoming Events Table

<h3>Upcoming Events</h3>
<div id="FutureEventsTableWrapper" style="width: 690px;">
   <div id="FutureEventsTableContainer" style="margin-left: 10px; margin-right: 10px;"></div>
</div>
<div id="EventDialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 5px; overflow: hidden; display: none;"><iframe height="650" width="700"></iframe></div>

HTML - Past Events Table

<h3>Past Events</h3>
<div id="PastEventsTableWrapper" style="width: 690px;">
   <div id="PastEventsTableContainer" style="margin-left: 10px; margin-right: 10px;"></div>
</div>
<div id="EventDialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 5px; overflow: hidden; display: none;"><iframe height="650" width="700"></iframe></div>

Event Registration


CSS

<link href="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/jtable/themes/lightcolor/blue/jtable.min.css" rel="stylesheet" type="text/css"/>
<link href="//ctl.iupui.edu/Common/Fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="//ctl.iupui.edu/Common/Events/css/register.css" rel="stylesheet" type="text/css"/>
<link href="//ctl.iupui.edu/Common/Events/css/eventregistration.css" rel="stylesheet" type="text/css"/>
<link href="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/jquery.confirm/jquery.confirm.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="//ctl.iupui.edu/Common/Events/css/jquery.confirm.css" media="screen" rel="stylesheet" type="text/css"/>
<style type="text/css">
   <!--
          #wrapper {
              background: none;
          }
          .eventIcon {
              display: inline-block;
              cursor: help;
          }
          #eventLocationContainerContent, #eventLocationContainerContent iframe {
              width: 100%;
              height: 100%;
          }
          #eventLocationContainerContent iframe {
              border: 0;
              overflow: hidden;
              overflow-y: auto;
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
              border-bottom-left-radius: 5px;
              box-shadow: 2px 2px 5px #000;
          }
          a.eventRegistration {
              color: #FFF;
              font-weight: 800;
              text-decoration: none;
          }
          a:hover.eventRegistration {
              color: #FFF;
              font-weight: 800;
          }
      -->
</style>

Javascript

<script src="//ctl.iupui.edu/Common/Scripts/AngularJS/angular.min.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Scripts/AngularJS/angular-sanitize.min.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/moment/min/moment.min.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Events/Scripts/remotesiteeventscript.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/jquery.bpopup.min.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/jquery.confirm/jquery.confirm.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Events/Scripts/eventregistration.js" type="text/javascript"></script>
<script type="text/javascript">
       var baseUrl = "/";                 
       var summaryTitle = "";
       var postCasAuthenticationPath = "/events/PostCasAuthentication.php";
</script>

HTML

<div class="ng-cloak" id="wrapper" ng-app="remoteEventsApp" ng-cloak="ng-cloak">
   <div ng-controller="RemoteEventsController">
      <div class="eventDetailsHeader"></div>
      <div class="eventDetailsContent">
         <div class="clear"></div>
         <div class="eventDetailsContentInner">
            <div ng-hide="!event.Presenters"><span style="display: inline-block; width: 85px; min-width: 75px; font-weight: bolder;"><em>Presenters:</em></span> {{event.Presenters}}</div>
            <div ng-hide="!event.Organizer"><span style="display: inline-block; width: 85px; min-width: 75px; font-weight: bolder;"><em>Organizer:</em></span> {{event.Organizer}}</div>
            <span style="display: inline-block; width: 85px; min-width: 75px; font-weight: bolder;"><em>When:</em></span> {{event.StartDateTime | asDate | date:'EEEE, MMMM d, h:mm a'}} - {{event.EndDateTime | asDate | date:'h:mm a'}} 
            <span ng-if="!event.WebcastEvent">EST</span> 
            <span style="display: inline-block; width: 85px; min-width: 75px; font-weight: bolder;"><em>Where:</em></span> {{event.Location}}
            <div ng-if="event.EventCancelled">
               <div style="color: red;">!IMPORTANT CHANGE NOTICE - EVENT CANCELLED!</div>
            </div>
            <div ng-if="event.WebMessageChangeNotice">
               <div style="color: red;">!IMPORTANT CHANGE NOTICE!</div>
            </div>
         </div>
      </div>
      <div ng-if="(event | isLessThan)">
         <div class="eventDetailsRegistration">
            <div ng-if="event.EventCancelled"><a class="eventRegistrationClosed">This event has been cancelled</a></div>
            <div ng-if="event.RegistrationRequired">
               <div ng-if="event.OverrideRegistrationUrl"><a class="eventRegistration" data-overrideregistrationurl="{{event.OverrideRegistrationUrl}}">Click Here To Register!</a></div>
               <div ng-if="event.RegistrationOpen"><a class="eventRegistration" data-eventid="{{event.Id}}" data-eventname="{{event.PlainTitle}}" data-multiplelocations="{{event.OfferedMultipleLocations}}" data-regtypes="{{event.RegTypes}}" data-scheduleid="{{event.ScheduleId}}">Click Here To Register!</a></div>
               <div ng-if="(event | isRegRequired)"><a class="eventRegistrationClosed">Registration Closed</a></div>
            </div>
            <div ng-if="event.WebcastEvent &amp;&amp; event.WebcastOnly">
               <div ng-if="event.OverrideRegistrationUrl"><a class="eventRegistration" data-overrideregistrationurl="{{event.OverrideRegistrationUrl}}">Click Here To Register!</a></div>
               <div ng-if="event.RegistrationOpen"><a class="eventRegistration" data-eventid="{{event.Id}}" data-eventname="{{event.PlainTitle}}" data-forcetype="Webcast" data-multiplelocations="{{event.OfferedMultipleLocations}}" data-regtypes="{{event.RegTypes}}" data-scheduleid="{{event.ScheduleId}}">Click Here To Register!</a></div>
               RegistrationOpen
               <div ng-if="(event | isWebcastEvent)"><a class="eventRegistrationClosed">Registration Closed</a></div>
            </div>
            <div ng-if="event.WebcastEvent &amp;&amp; !event.WebcastOnly">
               <div ng-if="event.OverrideRegistrationUrl"><a class="eventRegistration" data-overrideregistrationurl="{{event.OverrideRegistrationUrl}}">Click Here To Register!</a></div>
               <div ng-if="event.RegistrationOpen"><a class="eventRegistration" data-eventid="{{event.Id}}" data-eventname="{{event.PlainTitle}}" data-multiplelocations="{{event.OfferedMultipleLocations}}" data-regtypes="{{event.RegTypes}}" data-scheduleid="{{event.ScheduleId}}">Click Here To Register!</a></div>
               RegistrationOpen
               <div ng-if="(event | isWebcastEvent)"><a class="eventRegistrationClosed">Registration Closed</a></div>
            </div>
            <div ng-if="event.RecordingOnly">
               <div ng-if="event.RegistrationOpen"><a class="eventRegistration" data-eventid="{{event.Id}}" data-eventname="{{event.PlainTitle}}" data-forcetype="Recording" data-multiplelocations="{{event.OfferedMultipleLocations}}" data-regtypes="{{event.RegTypes}}" data-scheduleid="{{event.ScheduleId}}">Click Here To Register!</a></div>
               <div><a class="eventRegistrationClosed">Registration Closed</a></div>
            </div>
            <div ng-if="event.OverrideRegistrationUrl"><a class="eventRegistration" data-overrideregistrationurl="{{event.OverrideRegistrationUrl}}">Click Here View More Info</a></div>
         </div>
      </div>
      <div id="loginContainer" style="width: 100%; position: absolute; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); -moz-opacity: 0.0; -khtml-opacity: 0.0; -ms-opacity: 0.0; opacity: 0.0; left: 0; top: 0;">
         <div id="loginBox">
            <form id="loginForm">
               <fieldset>
                  <a href="javascript:void(0);" id="casRegistration" style="display: inline-block; width: 100%; text-align: center;"><strong>I have an IU network account</strong> <img alt="IU CAS Login" src="//ctl.iupui.edu/Common/Events/Images/button_login-up.gif" style="height: 32px; border: 0; background: transparent;" /></a> <!--DISABLED BUTTON
                     <a href="javascript:void(0);" id="externalRegistration" style="display: inline-block; float: right; width: 50%; text-align: center;"><strong>
                      I</strong> do not have an
                      IU network account</a>
                     -->
               </fieldset>
            </form>
         </div>
      </div>
      <div id="eventRegistrationContainer" style="display: none; background-color: #ffffff; width: 595px; height: 480px; border-radius: 15px; -moz-border-radius: 15px; opacity: 0;">
         <div style="position: absolute; width: 100%; height: 0; margin-top: -10px; margin-left: 10px;"><span class="bClose" style="float: right; cursor: pointer;"><img alt="Click here to close this window" height="25" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/red_close_button_small_24x24.png" width="24" /></span></div>
         <div id="eventRegistrationContainerContent" style="margin: 0; margin-top: 0; border-radius: 15px; -moz-border-radius: 15px;"></div>
      </div>
      <div id="eventLocationContainer" style="display: none; background-color: #ffffff; width: 595px; height: 480px; border-radius: 15px; -moz-border-radius: 15px; opacity: 0;">
         <div style="position: absolute; width: 100%; height: 0; margin-top: -10px; margin-left: 10px;"><span class="bClose" style="float: right; cursor: pointer;"><img alt="Click here to close this window" height="25" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/red_close_button_small_24x24.png" width="24" /></span></div>
         <div id="eventLocationContainerContent" style="margin: 0; margin-top: 0; border-radius: 15px; -moz-border-radius: 15px;"></div>
      </div>
      <div id="popupContainer" style="display: none; background-color: #ffffff; width: 595px; height: 480px; border-radius: 15px; -moz-border-radius: 15px; opacity: 0;">
         <div style="position: absolute; width: 100%; height: 0; margin-top: -10px; margin-left: 10px;"><span class="bClose" style="float: right; cursor: pointer;"><img alt="Click here to close this window" height="25" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/red_close_button_small_24x24.png" width="24" /></span></div>
         <div id="theMainContent" style="margin: 0; margin-top: 0; border-radius: 15px; -moz-border-radius: 15px;">
            <iframe height="240" id="theMainContent_src" src="about:blank" style="width: 595px; height: 480px; border: 0; overflow: hidden; overflow-y: auto; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 2px 2px 5px #000;" width="320"></iframe>
         </div>
      </div>
   </div>
</div>

Event Calendar


CSS

<link href="//ctl.iupui.edu/Common/Fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//ctl.iupui.edu/Common/Scripts/jQuery/jquery-ui-themes/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="//ctl.iupui.edu/Common/Scripts/jQuery/jquery-ui-themes/themes/pepper-grinder/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="//ctl.iupui.edu/Common/Events/css/eventscalendar.css" rel="stylesheet" type="text/css" />
<style type="text/css">
   <!--
      #calendar {
                  text-align: center;
                  font-size: 13px;
                  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
              }
       
              #calendar {
                  width: 680px;
                  margin: 0 auto;
              }
       
              #eventRegistrationContainerContent, #eventRegistrationContainerContent iframe {
                  width: 100%;
                  height: 100%;
              }
       
                  #eventRegistrationContainerContent iframe {
                      border: 0px;
                      overflow: hidden;
                      overflow-y: auto;
                      border-top-left-radius: 5px;
                      border-top-right-radius: 5px;
                      border-bottom-right-radius: 5px;
                      border-bottom-left-radius: 5px;
                      box-shadow: 2px 2px 5px #000;
                  }
       
              #eventLocationContainerContent, #eventLocationContainerContent iframe {
                  width: 100%;
                  height: 100%;
              }
       
                  #eventLocationContainerContent iframe {
                      border: 0px;
                      overflow: hidden;
                      overflow-y: auto;
                      border-top-left-radius: 5px;
                      border-top-right-radius: 5px;
                      border-bottom-right-radius: 5px;
                      border-bottom-left-radius: 5px;
                      box-shadow: 2px 2px 5px #000;
                  }
       
              .eventIcon {
                  display: inline-block;
                  cursor: help;
              }
                       
      .fc-header-title h2 {
      font-size: 18px;
      background: none;
      font-weight: 800;
      }
              #popupContainer img {
               padding: 0 !important; margin: 0 !important; background: transparent  !important; border: 0  !important;
              }
      -->
</style>

Javascript

<script src="http://ctl.iupui.edu/Common/Scripts/AngularJS/angular.min.js" type="text/javascript"></script>
<script src="http://ctl.iupui.edu/Common/Scripts/AngularJS/angular-sanitize.min.js" type="text/javascript"></script>
<script src="http://ctl.iupui.edu/Common/Scripts/jQuery/Plugins/moment/min/moment.min.js" type="text/javascript"></script>
<script src="http://ctl.iupui.edu/Common/Events/Scripts/remotesiteeventscript.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/moment/min/moment.min.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/fullcalendar/fullcalendar/fullcalendar.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/jquery.bpopup.min.js" type="text/javascript"></script>
<script type="text/javascript">
       var baseEvtUrl = "/CITLEvents/";        
       var eventDetailsRemotePath = baseEvtUrl + "EventDetails";
       var eventDetailsPath = "/events/EventDetails.php";
</script>
<script src="//ctl.iupui.edu/Common/Events/Scripts/eventregistration.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Events/Scripts/eventcalendar.js" type="text/javascript"></script>

HTML

<h2 style="text-align: center; padding: 0px; margin: 0px;">CITL Events Calendar</h2>
<div id="calendar" ></div>
<div id="eventRegistrationContainer" style="display: none; background-color: #ffffff; width: 595px; height: 480px; border-radius: 15px; -moz-border-radius: 15px; opacity: 0;">
   <div style="position: absolute; width: 100%; height: 0px; margin-top: -10px; margin-left: 10px;"><span class="bClose" style="float: right; cursor: pointer;"><img alt="Click here to close this window" height="25" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/red_close_button_small_24x24.png" width="24" /></span></div>
   <div id="eventRegistrationContainerContent" style="margin: 0px; margin-top: 0px; border-radius: 15px; -moz-border-radius: 15px;" ></div>
</div>
<div id="eventLocationContainer" style="display: none; background-color: #ffffff; width: 595px; height: 480px; border-radius: 15px; -moz-border-radius: 15px; opacity: 0;">
   <div style="position: absolute; width: 100%; height: 0px; margin-top: -10px; margin-left: 10px;"><span class="bClose" style="float: right; cursor: pointer;"><img alt="Click here to close this window" height="25" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/red_close_button_small_24x24.png" width="24" /></span></div>
   <div id="eventLocationContainerContent" style="margin: 0px; margin-top: 0px; border-radius: 15px; -moz-border-radius: 15px;" ></div>
</div>
<div id="popupContainer" style="display: none; background-color: #ffffff; width: 595px; height: 480px; border-radius: 15px; -moz-border-radius: 15px; opacity: 0;">
   <div style="position: absolute; width: 100%; height: 0px; margin-top: -10px; margin-left: 10px;"><span class="bClose" style="float: right; cursor: pointer;"><img alt="Click here to close this window" height="25" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/red_close_button_small_24x24.png" width="24" /></span></div>
   <div id="theMainContent" style="margin: 0px; margin-top: 0px; border-radius: 15px; -moz-border-radius: 15px;"><iframe height="240" id="theMainContent_src" src="about:blank" style="width: 595px; height: 480px; border: 0px; overflow: hidden; overflow-y: auto; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 2px 2px 5px #000;" width="320" ></iframe></div>
</div>

Event Details Popup (for calendar)


CSS

<link href="//ctl.iupui.edu/Common/Fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//ctl.iupui.edu/Common/Scripts/jQuery/jquery-ui-themes/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="//ctl.iupui.edu/Common/Scripts/jQuery/jquery-ui-themes/themes/pepper-grinder/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="//ctl.iupui.edu/Common/Events/css/eventscalendar.css" rel="stylesheet" type="text/css" />
<style type="text/css">
   <!--
      #calendar {
                  text-align: center;
                  font-size: 13px;
                  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
              }
       
              #calendar {
                  width: 680px;
                  margin: 0 auto;
              }
       
              #eventRegistrationContainerContent, #eventRegistrationContainerContent iframe {
                  width: 100%;
                  height: 100%;
              }
       
                  #eventRegistrationContainerContent iframe {
                      border: 0px;
                      overflow: hidden;
                      overflow-y: auto;
                      border-top-left-radius: 5px;
                      border-top-right-radius: 5px;
                      border-bottom-right-radius: 5px;
                      border-bottom-left-radius: 5px;
                      box-shadow: 2px 2px 5px #000;
                  }
       
              #eventLocationContainerContent, #eventLocationContainerContent iframe {
                  width: 100%;
                  height: 100%;
              }
       
                  #eventLocationContainerContent iframe {
                      border: 0px;
                      overflow: hidden;
                      overflow-y: auto;
                      border-top-left-radius: 5px;
                      border-top-right-radius: 5px;
                      border-bottom-right-radius: 5px;
                      border-bottom-left-radius: 5px;
                      box-shadow: 2px 2px 5px #000;
                  }
       
              .eventIcon {
                  display: inline-block;
                  cursor: help;
              }
                       
      .fc-header-title h2 {
      font-size: 18px;
      background: none;
      font-weight: 800;
      }
              #popupContainer img {
               padding: 0 !important; margin: 0 !important; background: transparent  !important; border: 0  !important;
              }
      -->
</style>

Javascript

<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/moment/min/moment.min.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/fullcalendar/fullcalendar/fullcalendar.js" type="text/javascript"></script>
<script src="http://ctl.iupui.edu/Common/Scripts/AngularJS/angular.min.js" type="text/javascript"></script>
<script src="http://ctl.iupui.edu/Common/Scripts/AngularJS/angular-sanitize.min.js" type="text/javascript"></script>
<script src="http://ctl.iupui.edu/Common/Scripts/jQuery/Plugins/moment/min/moment.min.js" type="text/javascript"></script>
<script src="http://ctl.iupui.edu/Common/Events/Scripts/remotesiteeventscript.js" type="text/javascript"></script>
<script type="text/javascript">
   function GetScrollBarWidth() {
               var inner = document.createElement('p');
               inner.style.width = "100%";
               inner.style.height = "200px";
    
               var outer = document.createElement('div');
               outer.style.position = "absolute";
               outer.style.top = "0px";
               outer.style.left = "0px";
               outer.style.visibility = "hidden";
               outer.style.width = "200px";
               outer.style.height = "150px";
               outer.style.overflow = "hidden";
               outer.appendChild(inner);
    
               document.body.appendChild(outer);
               var w1 = inner.offsetWidth;
               outer.style.overflow = 'scroll';
               var w2 = inner.offsetWidth;
               if (w1 == w2) {
                   w2 = outer.clientWidth;
               }
    
               document.body.removeChild(outer);
    
               return (w1 - w2);
           }
</script>
<script src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/jquery.bpopup.min.js" type="text/javascript"></script>
<script type="text/javascript">
       var baseEvtUrl = "/CITLEvents/";        
       var eventDetailsRemotePath = baseEvtUrl + "EventDetails";
       var eventDetailsPath = "/events/EventDetails.php";
</script>
<script src="//ctl.iupui.edu/Common/Events/Scripts/eventregistration.js" type="text/javascript"></script>
<script src="//ctl.iupui.edu/Common/Events/Scripts/eventcalendar.js" type="text/javascript"></script>                     

HTML

<div id="calendar" ></div>
<div id="eventRegistrationContainer" style="display: none; background-color: #ffffff; width: 595px; height: 480px; border-radius: 15px; -moz-border-radius: 15px; opacity: 0;">
   <div style="position: absolute; width: 100%; height: 0px; margin-top: -10px; margin-left: 10px;"><span class="bClose" style="float: right; cursor: pointer;"><img alt="Click here to close this window" height="25" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/red_close_button_small_24x24.png" width="24" /></span></div>
   <div id="eventRegistrationContainerContent" style="margin: 0px; margin-top: 0px; border-radius: 15px; -moz-border-radius: 15px;" ></div>
</div>
<div id="eventLocationContainer" style="display: none; background-color: #ffffff; width: 595px; height: 480px; border-radius: 15px; -moz-border-radius: 15px; opacity: 0;">
   <div style="position: absolute; width: 100%; height: 0px; margin-top: -10px; margin-left: 10px;"><span class="bClose" style="float: right; cursor: pointer;"><img alt="Click here to close this window" height="25" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/red_close_button_small_24x24.png" width="24" /></span></div>
   <div id="eventLocationContainerContent" style="margin: 0px; margin-top: 0px; border-radius: 15px; -moz-border-radius: 15px;" ></div>
</div>
<div id="popupContainer" style="display: none; background-color: #ffffff; width: 595px; height: 480px; border-radius: 15px; -moz-border-radius: 15px; opacity: 0;">
   <div style="position: absolute; width: 100%; height: 0px; margin-top: -10px; margin-left: 10px;"><span class="bClose" style="float: right; cursor: pointer;"><img alt="Click here to close this window" height="25" src="//ctl.iupui.edu/Common/Scripts/jQuery/Plugins/bpopup/red_close_button_small_24x24.png" width="24" /></span></div>
   <div id="theMainContent" style="margin: 0px; margin-top: 0px; border-radius: 15px; -moz-border-radius: 15px;"><iframe height="240" id="theMainContent_src" src="about:blank" style="width: 595px; height: 480px; border: 0px; overflow: hidden; overflow-y: auto; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 2px 2px 5px #000;" width="320" ></iframe></div>
</div>

Event Cancellation


HTML

<div id="wrapper" ng-app="remoteEventCancellationApp" ng-cloak="ng-cloak" class="ng-cloak" style="background: transparent">
   <div ng-controller="RemoteEventCancellationController">
      <div class="eventDetailsHeader">
         <p ng-bind-html="Message">&#160;</p>
      </div>
              <script src="//ctl.iupui.edu/Common/Scripts/jQuery/jquery.min.js" type="text/javascript"></script>
              <script type="text/javascript">              
                     var baseEvtUrl = "/CITLEvents/";               
      </script>
              <script src="//ctl.iupui.edu/Common/Events/Scripts/remotesiteeventscript.js" type="text/javascript"></script>
   </div>
</div>