Jake's Stuff

NYC BigApps 3.0 Hackathon

2011-11-04T07:49:00.000-04:00

NYC BigApps 3.0 Hackathon
Friday, November 11, 2011 at 7:00 PM - Sunday, November 13, 2011 at 5:00 PM (ET)
New York, NY

Join other NYC BigApps 3.0 participants for the first NYC BigApps Hackathon! This weekend-long hackathon is for anyone planning to participate in NYC BigApps 3.0.

Friday, Nov. 11 from 7 p.m to 9 pm.:
Networking event at Pivotal Labs
Saturday, Nov. 12 from 10 a.m. (through the night) to Sunday, Nov. 13 at 1 p.m.:
Hacking at Pivotal Labs
Sunday, Nov. 13 at 3 p.m.:
Presentations, judging, prizes

And here's what you can look forward to:

Develop ideas, brainstorm, explore NYC Open Data
Find teammates and contribute your skills
Build something amazing to help NYC
Talk to representatives from companies providing APIs
Compete for $2,500 in prizes for the best hacks!

Like NYC BigApps submissions, hacks must use data from NYC Open Data and will be judged on the quality of the idea, implementation, and potential impact. Learn more or register now

Full Calendar 1-4.10

2011-02-21T20:56:00.002-05:00

After a year of not playing with FullCalendar it was brought to my attention that my examples no longer work with version 1-4.10 of FullCalendar. So I took my sample code and modified it to work with the latest version of FullCalendar and ASP.NET (VB). The problems are still the same, just in different places.

You need to still modify the start / end param names (now called startParam and endParam) to use another date name, I prefer startDate and endDate. If you open the fullcalendar.js file you will find these around line 43.


//startParam: 'start',
//endParam: 'end',
startParam: 'startDate',
endParam: 'endDate'

Next you need to a search for .ajax (or skip to line 923) and modify the lines to add a couple key points to make this work with an ASP webservice.

 $.ajax({
url: source,
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(params),
cache: options.cacheParam 
false, // don't let jquery prevent caching if cacheParam is being used
success: function(events) {
popLoading();
callback(eval(events.d));
}

The last change was to create your webservice that will post your calendar events from your database to the calendar via the jquery ajax call.

    <WebMethod()> _
    Public Function EventList(ByVal startDate As String, ByVal endDate As String) As String
        ' List to hold events
        Dim events As List(Of CalendarDTO) = New List(Of CalendarDTO)()

        Dim starting As DateTime = FromUnixTimespan(startDate)
        ' Loop through events to be added
        For i As Integer = 0 To 4
            ' Create a new event and start to populate
            Dim value As CalendarDTO = New CalendarDTO()
            ' Date is required to be in a unix format
            value.StartDate = ToUnixTimespan(starting.AddDays(i * 2))
            value.id = i
            value.title = "Title of event number " + i.ToString()

            If i Mod 2 = 1 Then ' if even we will add an end date
                value.EndDate = ToUnixTimespan(starting.AddDays(1 + (i * 3)))
            End If
            events.Add(value)
        Next
        ' Serialize the return value so it can be decoded in java.
        Dim js As New System.Web.Script.Serialization.JavaScriptSerializer
        Dim returnvalue As String = js.Serialize(events).Replace("StartDate", "start").Replace("EndDate", "end")

        Return ret

As promised here is the full sample code to get fullcalendar working with a ASP webservice.

On a side note.. Have you read the latest Scot Harvath book, its well worth the read!

Enjoy!

Silverlight and the dreaded 2104 error

2011-02-06T17:07:00.000-05:00

So I am working on my latest side project (learning Silverlight 4) and the samples from the book I am reading Microsoft Silverlight 4 Data and Services Cookbook are causing errors, not all of them, just most of them. Here are the problems I encountered and how I resolved them.

First error was the One or more projects in the solution could not be loaded error. This was a pretty simple fix, right click on the project and select edit and then change the v3.0 to v4.0. Next just click save, close the file and right click on the project, selecting Reload Project.

Problem solved, the project loads, time for a coke and a smile? Not always. The next error I ran across was a freaky Webpage Error, Line 56, Error: Unhandled Error in Silverlight Application Code: 2104.

This error had me stumped for awhile, with many solutions saying to add the .xap extension mime type under IIS6 or IIS7. Only problem, I am on a development machine and not using IIS, so what do I do.

Open your project properties, click on the Silverlight tab, and click Add.. Select the Silverlight 4 application that is being built, leave the destination the default ClientBin and click Add.

The problem that took me many hours to resolve fixed in less than a minute of your time.

As for the book I am still working on it but with the samples working it is very detailed and covers both WCF webservices as well as WCF RIA web services. Give it a look if you are working on Silverlight 4 like me!

Student Discounts Rock!

2011-01-01T19:38:00.000-05:00

If you do any development and happen to be a student you GOTTA check out Microsoft's DreamSpark program! As per the DreamSpark site:
DreamSpark is simple: Its about giving students Microsoft professional tools at no charge.

Students get full versions of Visual Studio 2010 Pro (Or 2008 Pro), Windows Server 2008 or 2008 R2, Expression Studio 4 ultimate and lots more (Sql Server, Game Studio). I would say its worth enrolling in a few classes just to get download privileges to this site!

Adding dynamic color to FullCalendar from ASP.NET Webservice.

2010-07-20T08:16:00.000-04:00

Building on the last example of how to get FullCalendar to run using VB.NET using a webservice, today we will show a simple example of adding dynamic color. In the example I created I have 3 events, holidays, vacations and other. I would like to color each event a separate color to make it easy to tell holidays from vacations.

First we need to open the CalendarDTO class that we use to pass data from the webservice back to the FullCalendar plugin.
In the class add a single property named className, take note that this property name needs to be exact!


    Private m_Class As String
    Public Property className() As String
        Get
            Return m_Class
        End Get
        Set(ByVal value As String)
            m_Class = value
        End Set
    End Property

Next in the Calendar.vb webservice you need to add the class name that you will use in the sytlesheet. For my example I am going to randomly assign the class names holiday, vacation and other.


     _
    Public Function EventList(ByVal startDate As String, ByVal endDate As String) As String
        ' List to hold events
        Dim events As List(Of CalendarDTO) = New List(Of CalendarDTO)()
        Dim rand As New System.Random(2)

        Dim starting As DateTime = FromUnixTimespan(startDate)
        ' Loop through events to be added
        For i As Integer = 0 To 4
            ' Create a new event and start to populate
            Dim value As CalendarDTO = New CalendarDTO()
            ' Date is required to be in a unix format
            value.StartDate = ToUnixTimespan(starting.AddDays(i * 2))
            value.id = i
            value.title = "Title of event number " + i.ToString()


            Select Case rand.Next(1, 3)
                Case 1
                    value.className = "holiday"
                Case 2
                    value.className = "vacation"
                Case 3
                    value.className = "other"
            End Select

            If i Mod 2 = 1 Then ' if even we will add an end date
                value.EndDate = ToUnixTimespan(starting.AddDays(1 + (i * 3)))
            End If
            events.Add(value)
        Next
        ' Serialize the return value so it can be decoded in java.
        Dim js As New System.Web.Script.Serialization.JavaScriptSerializer
        Return js.Serialize(events)
    End Function

Now we need to add the style to the page with the calendar, once again you need to make sure the name matches the name you used in the className field in the webservice.


<style type="text/css">
    .holiday, 
    .fc-agend a .holiday .fc-event-time,
    .holiday a
    {
        background-color: Olive; /* background color */
        border-color: Olive;     /* border color */
        color: White;           /* text color */
    }
    .vacation, 
    .fc-agend a .vacation .fc-event-time,
    .vacation a
    {
        background-color: Maroon; /* background color */
        border-color: Maroon;     /* border color */
        color: White;           /* text color */
    }
    .other, 
    .fc-agend a .other .fc-event-time,
    .other a
    {
        background-color: Fuchsia; /* background color */
        border-color: Fuchsia;     /* border color */
        color: White;           /* text color */
    }
</style>

Run the example and you should have colored events!

The key to this is to watch the names and make sure you are consistant.

Up next will be integrating a tooltip with matching colors.

jQuery FullCalendar and ASP.NET

2010-06-22T12:03:00.002-04:00

I needed to display a simple event calendar and looked around for the easiest path to the solution and found fullcalendar v1.4.6. The control is simple and elegant, but not very asp.net and expecially vb.net friendly. This is how you get it to work with a VB.NET webservice that can be used to pull from a database.

Update: v1.4.10 example can be found here.

Updated! You can now download the example code here.
I am going to assume that you are able to create a basic asp.net website, add your own calendar page and put the fullcalendar control on the page.

First we will create a data class to return the results from the webservice.


Public Class CalendarDTO
Private m_id As Int32    
Public Property id() As Int32
Get
Return m_id
End Get
Set(ByVal value As Int32)
m_id = value
End Set
End Property

Private m_Title As String
Public Property title() As String
Get
Return m_Title
End Get
Set(ByVal value As String)
m_Title = value
End Set
End Property

Private m_Start As Int64
Public Property StartDate() As Int64
Get
Return m_Start
End Get
Set(ByVal value As Int64)
m_Start = value
End Set
End Property

Private m_End As Int64
Public Property EndDate() As Int64
Get
Return m_End
End Get
Set(ByVal value As Int64)
m_End = value
End Set
End Property

Private m_Url As String
Public Property url() As String
Get
Return m_Url
End Get
Set(ByVal value As String)
m_Url = value
End Set
End Property
End Class

The part of this code you need to take special note is EndDate and StartDate properties, we need to convert these to start and end in the fullcalendar.js file.

Next we will add the basic info to the webservice (once again I hope you can find enough examples to add a webservice on the web). Points to take note of are the startDate and endDate strings, these will be passed in as a unixTimespan and will look like a long integer, we will need to convert our dates from this format.


Public Function EventList(ByVal startDate As String, ByVal endDate As String) As String
Dim events As List(Of CalendarDTO) = New List(Of CalendarDTO)()
' Do Some SQL Here
Using con As New SqlConnection(conString)
Dim sqlCmd As SqlCommand = New SqlCommand("GetCalendarEvents", con)
sqlCmd.Parameters.Add(New SqlParameter("@startdate", Data.SqlDbType.DateTime))
sqlCmd.Parameters("@startdate").Value = FromUnixTimespan(startDate)
sqlCmd.Parameters.Add(New SqlParameter("@enddate", Data.SqlDbType.DateTime))
sqlCmd.Parameters("@enddate").Value = FromUnixTimespan(endDate)

con.Open()
Dim sdr As SqlDataReader = sqlCmd.ExecuteReader
While sdr.Read
Dim value As CalendarDTO = New CalendarDTO()
If Not IsDBNull(sdr("EndDate")) Then
value.EndDate = ToUnixTimespan(sdr("EndDate"))
End If
value.StartDate = ToUnixTimespan(sdr("StartDate"))
value.id = sdr("Event_ID")
value.title = sdr("title")
value.url = "http://url/"
events.Add(value)
End While
End Using

Dim js As New JavaScriptSerializer
Return js.Serialize(events)
End Function

Private Function ToUnixTimespan(ByVal d As DateTime) As Int64
Dim time As New TimeSpan()
time = d.ToUniversalTime().Subtract(New DateTime(1970, 1, 1, 0, 0, 0))
Return CType(Math.Truncate(time.TotalSeconds), Int64)
End Function

Private Function FromUnixTimespan(ByVal s As String) As DateTime
Dim time As DateTime = New DateTime(1970, 1, 1, 0, 0, 0)
Return time.AddSeconds(s)
End Function

Now to call the json formatted webservice we need to add "Calendar.asmx/EventList" to the events to be called by the calendar plugin.


<script type="text/javascript" language="javascript">
$(document).ready(function() {       
$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
events: "Calendar.asmx/EventList"         
//events: [{title:'event1',start:'2010-06-01'},{title:'event2',start:'2010-06-05',end:'2010-06-07'}]                        
});         
});
</script>

Last we need to make the changes to make the fullcalendar.js file VB.NET friendly.
Line 25 (give or take)
Replace the following lines:


startParam: ‘start’,
endParam: ‘end’,

with


startParam:’startDate’,
endParam:’endDate’,

This will change the passed parameters to work with the webservice created above (call using startDate and endDate instead of start and end.
Next we need to change all the returned fields from the webservice calendarDTO class from startDate to start and endDate to end.
At line 442 in the ‘reportEventsAndPop = function(a) function you need to add:


reportEventsAndPop = function(a) {
if (a.d) {
var a = eval('(' + a.d.replace(/StartDate/g, 'start').replace (/EndDate/g, 'end') + ')');
}
reportEvents(a);
popLoading();
};

This will convert the json to an object and replace all the ‘StartDate’ and ‘EndDate’ fields with ‘start’ and ‘end’
For the ajax call to work using a asp.net webservice you need to add the type: ‘Post’ since GET is not allowed, You need to specifiy the content and data type and lastly you need to use the jasn2.js script to convert the params variable to a json string to pass into the webservice.
At line 448 replace the $.ajax call with the following:


$.ajax({
url: src,
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: JSON.stringify(params),
cache: options.cacheParam false, // don't let jquery prevent caching if cacheParam is being used
success: reportEventsAndPop });

Take special note of the JSON.stringify(params), this uses the json2.js script availible from json.org. This is required to convert the passed parameters into a json formated string.