Rendering three types of events as HTML elements I have to clean up some Javascript and I am trying to figure out a more elegant way to write this code below. It's basically looping through 3 dictionaries with the same loop structure and appending some custom HTML onto a specific div.  I wanted to see if there is a way to avoid this repetitive code:

if (dtInt in calendarEventDict) {
    var arrEvents = calendarEventDict[dtInt];
    for (var a = 0; a &lt; arrEvents.length; a++) {
        var calendarEvent = arrEvents[a];
        $("#dateCupcake" + i).append("&lt;div  dateId='" + calendarEvent.Date + "' class='event " + "cal" + calendarEvent.CalendarId + " " + calendarEvent.CalendarClassName + "' calendarId='" + calendarEvent.CalendarId + "' eventDateId='" + calendarEvent.Id + "' id='" + calendarEvent.EventId + "'&gt;" + calendarEvent.DisplayName + "&lt;/div&gt;");
    }
}
if (dtInt in vacationEvents) {
    var arrEventsV = vacationEvents[dtInt];
    for (var v = 0; v &lt; arrEventsV.length; v++) {
        var vacationEvent = arrEventsV[v];
        $("#dateCupcake" + i).append("&lt;div  dateId='" + vacationEvent.Date + "' class='event " + "cal1 blueAllDay' calendarId='1' eventDateId='" + vacationEvent.Id + "' id='" + vacationEvent.EventId + "'&gt;&lt;img src='/Content/Images/Icons/pawn_glass_" + vacationEvent.ApprovalIcon + ".png' /&gt;" + vacationEvent.PersonName + "&lt;/div&gt;");
    }
}
if (dtInt in travelEvents) {
    var arrEventsV1 = travelEvents[dtInt];
    for (var v1 = 0; v1 &lt; arrEventsV1.length; v1++) {
        var travelEvent = arrEventsV1[v1];
        $("#dateCupcake" + i).append("&lt;div  calendarId='2' dateId='" + travelEvent.Date.ToString("MMM dd, yyyy") + "' class='event " + "cal2" + " blueAllDay' calendarId='2' eventDateId='" + travelEvent.Id + "' eventId='" + travelEvent.TravelRequest.Id + "'&gt;&lt;img src='/Content/Images/Icons/user1_earth16.png' /&gt;" + travelEvent.TravelRequest.Person.LastName + ", " + travelEvent.TravelRequest.Person.FirstName.Substring(0, 1) + " visiting " + travelEvent.TravelRequest.TechnicalCentre.Name + "&lt;/div&gt; ");
    }
}
The simplest refactor would be to simply pull out the common functionality, and pass in the array for each case, as well as a function used to create your div content from the current item in the loop.  Assuming dtInt is global:

function checkDtInt(arr, funcToCreateDiv) {    
    if (dtInt in arr) {
        var arrEventsV1 = arr[dtInt];
        for (var v1 = 0; v1 &lt; arrEventsV1.length; v1++) {
            var travelEvent = arrEventsV1[v1];
            $("#dateCupcake" + i).append(funcToCreateDiv(travelEvent));
        }
    }
 }

checkDtInt(calendarEventDict, function(item) { 
   return "&lt;div  dateId='" + item.Date + "' class='event " + "cal" + item.CalendarId + " " + item.CalendarClassName + "' calendarId='" + item.CalendarId + "' eventDateId='" + item.Id + "' id='" + item.EventId + "'&gt;" + item.DisplayName + "&lt;/div&gt;"
});

checkDtInt(vacationEvents, function(item) { 
   return "&lt;div  dateId='" + item.Date + "' class='event " + "cal1 blueAllDay' calendarId='1' eventDateId='" + item.Id + "' id='" + item.EventId + "'&gt;&lt;img src='/Content/Images/Icons/pawn_glass_" + item.ApprovalIcon + ".png' /&gt;" + item.PersonName + "&lt;/div&gt;"
});

checkDtInt(travelEvents, function(item) { 
   return "&lt;div  calendarId='2' dateId='" + item.Date.ToString("MMM dd, yyyy") + "' class='event " + "cal2" + " blueAllDay' calendarId='2' eventDateId='" + item.Id + "' eventId='" + item.TravelRequest.Id + "'&gt;&lt;img src='/Content/Images/Icons/user1_earth16.png' /&gt;" + item.TravelRequest.Person.LastName + ", " + item.TravelRequest.Person.FirstName.Substring(0, 1) + " visiting " + item.TravelRequest.TechnicalCentre.Name + "&lt;/div&gt; "
});