Using TypeScript with the FullCalendar JQuery Plugin

24 09 2013

I recently needed to do a proof of concept to ensure TypeScript would work with the FullCalendar plugin, as I was planning on using these together in a new app I’m working on. When I searched for any information on this combination, I didn’t find much, which is why I’m writing this.

Now if you’ve found your way here, then I’m sure you’re already familiar with TypeScript so I won’t go into detail on what TypeScript is and how it works. The TypeScript site does that so well itself anyway so if you’re curious, check it out here – http://www.typescriptlang.org/.

The good new is, THEY DO WORK TOGETHER! The even better news is, someone has already written a type definition which has been included in the DefinitelyTyped project. So it’s quite quick and easy to get up and running with this. As I mentioned, this is a proof of concept so I haven’t spent too much time on code structure so please don’t take the structure of my code as the best way, this is just to show you quickly, how I proved this will work.

I’ve got a basic Web Application in Visual Studio. I’ve then used nuget to install the following packages:

  • jQuery (2.0.3 in this case, the latest at the time of writing)
  • jquery.TypeScript.DefinitelyTyped (the jquery.d.ts file)
  • fullCalendar.TypeScript.DefinitelyTyped (the fullCalendar.d.ts file)

I’ve also manually added the FullCalendar files (1.6.4 in this case, the latest at the time of writing). I also created a TypeScript file, which I’ve called App.ts which is where I’m going to put all my TypeScript code (this is what I was referring to earlier when I said please don’t take my code structure as the right way to do it. In a proper application I would have split my classes out etc).

Apologies for the not great formatting of the code. I really need to find a newer theme that deals with code snippets a bit better. I have also uploaded the whole Visual Studio project (it’s a VS2013 project so apologies if you can’t open it, but you will still be able to look at any of the files in Notepad etc). Links are at the end.

Ok, so first up, my reference paths at the top of my TypeScript file are:
/// <reference path="../typings/fullCalendar/fullCalendar.d.ts" />
/// <reference path="../typings/jquery/jquery.d.ts" />

Now my first class, my AppGlobal class. A simple class that has a function called InitiateCalendar which does the required setup of FullCalendar:
class AppGlobal {
InitiateCalendar(calEvents: CalendarEvent[]): void {
var calendar: JQuery = $("#calendar");
calendar.fullCalendar({
header: {
left: "month,agendaWeek,agendaDay",
center: "title",
right: "today prev,next"
},
events: calEvents,
firstDay: 1,
weekMode: "fluid",
dayClick: (date: Date, allDay: boolean, jsEvent: Event, view: FullCalendar.View) => {
goToDay(calendar, date, view);
}
});
}
}

You may have noticed that InitiateCalendar is expecting an array of CalendarEvent objects. This is another class I’ve created, inheriting from the FullCalendar EventObject defined in the fullCalendar.d.ts file. Here’s my CalendarEvent class:

class CalendarEvent implements FullCalendar.EventObject {
id: any; // String/number
title: string;
allDay: boolean;
start: Date;
end: Date;
url: string;
className: any; // string/Array
editable: boolean;
source: FullCalendar.EventSource;
color: string;
backgroundColor: string;
borderColor: string;
textColor: string;
// Constructor only requires the first 5 parameters, the rest are optional (this is personal choice)
constructor(id: any, title: string, allDay: boolean, start: Date, end: Date, url?: string, className?: any, editable?: boolean, source?: FullCalendar.EventSource,
color?: string, backgroundColor?: string, borderColor?: string, textColor?: string) {
this.id = id;
this.title = title;
this.allDay = allDay;
this.start = start;
this.end = end;
this.url = url;
this.className = className;
this.editable = editable;
this.source = source;
this.color = color;
this.backgroundColor = backgroundColor;
this.borderColor = borderColor;
this.textColor = textColor;
}
}

One of things that slowed me down a little in getting this up and running, was how best to call the methods such as gotoDate and changeView. You may notice in InitiateCalendar that I am calling a function goToDate on dayClick, so here is that function:

function goToDay(calendar: JQuery, date: Date, currentView: FullCalendar.View) {
if (currentView.name !== "agendaDay") {
calendar.fullCalendar("changeView", "agendaDay");
}
calendar.fullCalendar("gotoDate", date);
}

Again, I’m not saying this IS the best. It’s just the best way I’ve thought of myself so far. If you have a suggestion, please leave a comment! 🙂 My reasons for doing it this way at this point were:

  • By saving $(“#calendar”) to a variable, I am only asking jQuery to select it once which means I am gaining a small performance increase each time I use it after that
  • Every time I want to use the variable, it’s shorter and easier to write, especially as intellisense completes it for me
  • Separating it out into a named function instead of leaving it in the anonymous function makes it accessible for unit testing if required

So the final part, at the end of my TypeScript file, I have the following:

$(document).ready(() => {
var app = new AppGlobal();
var events: CalendarEvent[] = [
new CalendarEvent(1, "Test Event 1", false, new Date(2013, 8, 1, 12, 0, 0, 0), new Date(2013, 8, 1, 13, 0, 0, 0)),
new CalendarEvent(2, "Test All Day Event 1", true, new Date(2013, 8, 2, 0, 0, 0, 0), new Date(2013, 8, 2, 0, 0, 0))
];
app.InitiateCalendar(events);
});

I hope this makes sense! As promised anyway, you can download a zip file with the Visual Studio 2013 solution here – https://dl.dropboxusercontent.com/u/88673025/FullCalendarWithTypescript.zip. Alternatively, if you’d prefer to just look at the TypeScript, you can get that here – https://dl.dropboxusercontent.com/u/88673025/App.ts

Hopefully this helps someone even if it just saves someone else doing a proof of concept 🙂 Any questions, leave a comment and I’ll try and help!

Advertisements




How To Do A Printer Friendly Pop Up That Has Information From The Original Web Page

8 07 2010

Well that’s a bit of a lengthy title isn’t it! I wasn’t really sure what to call it. I’m sure this could be used in other ways too, but in my case I wanted to create a printer friendly pop up page, that took information from my ASP.net page to present in the pop up. I’ll show the C# code first but then will also show you just the javascript without all the added double quotes and various other symbols that may cause confusion. Also apologies for the somewhat messy code listing for the C’# part, I may need to consider a change of theme soon!

IMPORTANT NOTE: The web site I was doing this in is in .NET 1.1 so I am using the RegisterClientScriptBlock from the C#. This method is obsolete from 2.0 upwards so you should look to replace it with it’s correct newer method.

RegisterClientScriptBlock("PrintWindow", "<script language=\"javascript">\" + @"
var content = '" + infoLabel.Text + @"';
var printFriendly=window.open('','PrinterFriendly','toolbar=no,menubar=no,width=1000,height=600');
printFriendly.document.open();
printFriendly.document.write('<html><head><title>Printer Friendly Pop Up Page</title></head>');" +
"printFriendly.document.write('<img src="\"Images/ProgressPrintHeader.png\"" /><h1>');" + @"
printFriendly.document.write(content);
printFriendly.document.write('</h1>');
printFriendly.document.write('<h5>Printed on ');
printFriendly.document.write('" + DateTime.Now.ToString("dd MMMM yyyy") + @"');
printFriendly.document.write('</h5></body></html>');
printFriendly.document.close();
printFriendly.focus();
</script>");

Now for just the javascript code on it’s own, without all the squiffy formatting and confusing symbols!

var content = 'Text from original page';
var printFriendly=window.open('','PrinterFriendly','toolbar=no,menubar=no,width=1000,height=600');
printFriendly.document.open();
printFriendly.document.write('<html><head><title>Printer Friendly Pop Up Page</title></head>');
printFriendly.document.write('<body onLoad="self.print()"><img src="Images/ProgressPrintHeader.png"></br></br><h1>');
printFriendly.document.write(content);
printFriendly.document.write('</h1></br></br>');
printFriendly.document.write('<h5>Printed on ');
printFriendly.document.write('Today's date');
printFriendly.document.write('</h5></body></html>');
printFriendly.document.close();
printFriendly.focus();

It’s important to use the document.close() method, otherwise your print dialog will never pop up because as far as your browser is concerned, the document is still being written.

So as you can see, in order to take the text from my original ASP.net page into my pop up, I am referencing the label that the required text is in. It is also possible to do it using javascript if you are not using ASP.net or anything similar.

If I had the text I wanted to print within div tags for example:

<div id=”print”>All text to be printed</div>

then I could then retrieve that text using:

document.getElementById(‘print’).innerHTML;

I hope that all makes sense! Feel free to comment if I have well and truly confused you 🙂





SQL Injection & Cross-Site Scripting (XSS)

23 06 2009

Today saw the need for me to test a current web application I’m working on for SQL Injection and Cross-Site Scripting. Although I was aware of both, I’d never had to test for them before. So in order to test for them, I had to learn how to do them first. I’m going to keep this post basic, as I found quite a few very useful pages & articles which I will link to at the end.

SQL Injection:

When creating or updating a database table, in my web application I am going through a Data Access Layer (DAL). I always use paramaterised queries as a rule, as I was aware that this was important security wise. To test SQL injection capabilities on my web application, I created a new table in my database called TestTable. Then I went to a web form that ultimately runs the UPDATE command on my database. In the ‘Description’ text fields, I inserted the following text
'; DROP TABLE TestTable --'
Which could result in the SQL code being
UPDATE NameTable
SET Name = 'Me', Description = ''; DROP TABLE TestTable --'
WHERE Id='1'

Obviously very dangerous code! Luckily, due to my DAL and parameterised queries, it took the text as literal text and not executable text and updated the database as expected, but with
'; DROP TABLE TestTable --'
as the description for the name ‘Me’. As I said, this is a basic explanation, there are also tests you should do on a login. I’m using a customised version of the .Net Membership API on my web application, in which case it was already accounted for. However, if you have written you’re own membership authentication, you should definitely test it for SQL injection.

The links I found useful for SQL injection as promised are:
http://msdn.microsoft.com/en-us/library/ms998271.aspx
http://www.sitepoint.com/article/sql-injection-attacks-safe/

Cross-Site Scripting (XSS):

If you are using Response.Write in your ASP.net pages, you are definitely vulnerable to XSS, also if you are using query strings. Even if you’re not, I would still recommend testing for any vulnerabilities. In order to test, I used some simple Javasript to pop up an alert box. I then pasted this on to the end of my url, i.e. “www.mywebsite.co.uk/login.aspx?’insert javascript here'” and pressing enter. If you get a pop up box with the text you gave to your Javascript alert command, then that’s bad! ASP.net handled my error with HttpRequestValidationException and didn’t carry out any of the Javascript, this is good! I tried the same thing when logged into my website, and also entered the Javascript in a text box on a form and submitted it. Again .Net handled it for me using a HttpRequestValidationException. All is well.

The links I found useful for Cross-site scripting as promised are:
http://en.wikipedia.org/wiki/Cross-site_scripting
http://www.sitepoint.com/article/cross-site-scripting/

Conclusion:

I’m pretty happy with how my tests went. I am however going to add some extra validation checks on my text boxes anyway, make sure all UPDATE, INSERT and DELETE commands are carried out via stored procedure and also make sure my user for connection to the database can only execute required stored procedures and select statements (that are parameterised) and cannot do any direct table access.

As I mentioned at the beginning of the post, I am new to the in’s and out’s of SQL Injection and XSS, so my understanding on some points may be a little off! If anyone who reads this thinks I’m wrong in something I’ve said, or can add anything to anything I’ve said, please comment because I would like to learn more about this subject.





Getting the text from a HTML select drop down box using Javascript

18 03 2009

I have a web page that uses an HTML select drop down list:

<select name="Company"> <%GetCompanies();%> </select>

When this web page is submitted, I need to show a Javascript ‘confirm’ box that would ensure that the user was sending the document created by the web page to the correct company. In order to do this, I needed to retrieve the selected company name from the select drop down list.

There are 3 pieces of information that you could get from this drop down list. The index (0,1,2 etc) which depends on which option is selected in the drop down list. The value, which in my case was a CompanyId that is retrieved from the database via my ‘GetCompanies()’ method, and the text, which is the actual text that is being displayed in the selected item of the drop down list. I placed the following code on the submit button:

<input type="submit" value="Send" onclick="return confirmSubmit()" />

The ‘confirmSubmit()’ is a Javascript function declared at the top of my page as follows:

function confirmSubmit()
{
var companyIndex = document.invoice.OrgID.selectedIndex;
var companyName = document.invoice.OrgID[companyIndex].text;
var ok = confirm('Are you sure you want to send this invoice to ' + companyName + '?');
if(ok)
return true;
else
return false;
}

So I get the selectedIndex, and use that value to find the text. If you didn’t do it that way, you would get returned ‘undefined’. Another way to find it would be:

document.getElementByName('OrgID').selectedIndex

As opposed to:

document.invoice.OrgID.selectedIndex

If true (Ok) is returned, the button continues to submit as expected. If false (Cancel) is returned, nothing happens and the user is free to change any details on the page.





Are you sure you want to do that? Pop-up boxes with ASP.net web applications.

29 01 2009

My current project required that when a user tried to delete something, they would get a warning, that deleting that would delete other things to and offer them the option to proceed or cancel. There are many ways to do this, the best way I found to do it was using the following code:

Response.Write("<script>var result=confirm('Are you sure you want to delete this project? Doing so will also delete all units and tests associated to this project. Click OK to proceed, or Cancel to return to the Project Maintenance screen.');if(result){window.document.location.href='SubmitProject.aspx';}else{window.document.location.href='ProjectMaintenance.aspx';}</script>");

So the Javascript function says:

show the confirmation box
if(result == 'Ok')
{
go to SubmitProject.aspx
}else{
return to current page ProjectMaintenance.aspx
}

This is a very hand bit of code that I will probably use quite a lot from now on!





Math.round() vs toFixed()

9 01 2009

Something I recently came across when working with calculations which were to 4 decimal places and then had to be rounded to 2 decimal places, was rounding in Javascript.

The code that was originally doing this was toFixed(x) where x is the number of decimal places required. After some incorrect calcualtions and investigation, I found that toFixed(x) instead of rounding to 2 decimal places, was discarding anything after the 2 decimal places. More chopping rather than rounding!

Then I looked into the Math.round function to see if this would be a better alternative and it was. Using the following logic, the totals now round nicely to 2 decimal places (this can be adapted for however many decimal places are required).

Math.round(total * 10^x) / 10^x (where x is the number of decimal places required)

Therefore my code reads…

Math.round(total * 100) / 100

And this gives me 2 lovely decimal places, rounded, not chopped.