Holiday Giveaway Calendar Hacks

Our Holiday Giveaway Calendar is one of our most popular holiday Campaigns. Using the template straight out of the box will let you create an engaging multi-day giveaway but if you want to modify the template at all, the following hacks are our most requested.

As always, if you have questions, email us if you have questions: theteam@shortstacklab.com. Cheers!

Hack #1: Change all day numbers on calendar to image(s)

Use the CSS below to change the numbers that appear on the calendar into images. To do this, open the CSS Editor by clicking the # icon that appears on the main toolbar, just above the “Test your Campaign” button. Copy and paste the following chunk of code, starting at the forward slash and ending with the closed bracket, add it to the code that’s already there, either at the very top or the very bottom within the Editor window.

/* Day Square Format - Day 1 */
.calendar a.day[href="#"][data-day="1"]{
background: url(YOUR URL HERE) no-repeat;
background-size: 100%; /* Ensures image will fit within calendar box */
color: transparent;
overflow:hidden;
height:128px;
width:158px;
border: none; /* Border */
border-radius: 0; /* removes border radius */
text-align:center;
margin: 0 15px 26px;
box-shadow: none; /* removes shadow */
display:inline-block;
opacity: 1;
}

You will need to replace (YOUR URL HERE) in the code snippet above with the URL of the image you want to use. We recommend images that are 128x158px in size, or something close to this. You will also need to change [data-day="1"] to the number of the day you're changing.When finished, click the orange Save CSS button.You will have to repeat all of these steps for each day.

Hack #2: Change day numbers on calendar to different numbers

Use the JavaScript below to change the numbers that appear on the calendar into different numbers. To do this, hover over the Code Widget named “Controller (do not edit)” and click on the pencil icon.  Edit the JavaScript to reflect the new numbers you want to display.  Save and exit.For example, if you wanted the numbers to begin with 12 and increase to 23, you would change this line of JavaScript:

// setup links for each day
  for (i=1; i<=totalDays; i++) {
    $cal.append('<a class="day' + ((i > currentDay) ? " locked" : " unlocked") + '" href="#" data-day="' + i + '">' + i + '</a>');
  }to this:// setup links for each day
  for (i=1; i<=totalDays; i++) {
    $cal.append('<a class="day' + ((i > currentDay) ? " locked" : " unlocked") + '" href="#" data-day="' + i + '">' + (i+11) + '</a>');
  }

Note:  The section of the updated JavaScript that reads `(i+11)` will dictate the number the calendar starts with.  So, if you prefer the number begin with 6, then you would use `(i+5)`

Hack #3: Change locked days to an image

Use the CSS below to help you change out the locked day numbers for images. To do this, open the CSS Editor by clicking the # icon that appears on the main toolbar, just above the “Test your Campaign” button. Copy and paste the following chunk of code, starting at the forward slash and ending with the closed bracket, add it to the code that’s already there, either at the very top or the very bottom within the Editor window.

/* Day Square Format - Day 1 Locked */
.calendar a.day.locked[href="#"][data-day="1"]{
background: url(YOUR URL HERE) no-repeat;
background-size: 100%; /* Ensures image will fit within calendar box */
color: transparent;
overflow:hidden;
height:128px;
width:158px;
border: none; /* Border */
border-radius: 0; /* removes border radius */
text-align:center;
margin: 0 15px 26px;
box-shadow: none; /* removes shadow */
display:inline-block;
opacity: 1;
}

You will need to replace (YOUR URL HERE) in the code snippet above with the URL of the image you want to use. We recommend images that are 128x158px in size, or something close to this. You will also need to change [data-day="1"] to the number of the day you're changing.When finished, click the orange Save CSS button.You will have to repeat all of these steps for each day.

Hack #4: Lock all days except the active day

If you're building a holiday giveaway campaign using our calendar template, you might have wondered how to lock all days except the one day that's active. The JavaScript code below will allow you to do this.Be aware that editing the custom JavaScript incorrectly in this widget can affect the way your Campaign functions.In the Edit Widgets Panel, hover over the Code Widget named “Controller (do not edit)” and click on the pencil icon. Copy the code below, starting with <script type="text/javascript"> all the way down to </script> and replaceall of the code that appears in the window.  Save and exit.

<script type="text/javascript">
//
//
//
//
//
//
//
//
// YOU DON'T NEED TO CHANGE ANYTHING HERE
// EDIT AT YOUR OWN RISK
//
//
//
//
//
//
//
//
//
//

$(function(){

if (tab_config.environment === 'preview') {
// do nothing
}
else {
$('#container').addClass('prize-container');
}

// Event handler to close the current popup when clicking on widgets with the "close_when_clicked" extra css class
$('body').on('click', '.boxy-content.close_when_clicked', function(e){
if (!$(e.target).is('a')){
e.preventDefault();
var boxy = Boxy.get(this);
boxy.hideAndUnload();
}
});

var i,
current_day,
day,
startDate;
var $cal = $('.calendar'),
$prizes = $('.prizes > .ss_container_content > .ss_container'),
$lockedMsg = $('.locked_msg');
var now = new Date(),
totalDays = $prizes.length;

// change # of days displayed
$('span.total_days').text(totalDays);

// check for date override
var timenow_re = window.location.href.match(/timenow=([\w%]+)/);
if (timenow_re) {
var parsed = Date.parse(decodeURIComponent(timenow_re[1]));
if (parsed) {
now = new Date(parsed);
}
}
var nowDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());

startDate = new Date(startYear, startMonth - 1, startDay);
secsPerDay = 1000 * 60 * 60 * 24;
currentDay = Math.round( (nowDate - startDate + 1) / secsPerDay ) + 1;

// setup links for each day
for (i=1; i<=totalDays; i++) {
$cal.append('<a class="day' + ((i != currentDay) ? " locked" : " unlocked") + '" href="#" data-day="' + i + '">' + i + '</a>');
}

// unlocked click handler
$('.calendar .unlocked').attr('target', '').click(function(event) {
var day = $(event.target).data('day');
var prize = $prizes.get(day-1);
if (prize) {
var config = SST.widget_config(prize);
SST.widget_popup(config, this);
}
else {
ss_alert('There is no popup configured for Day ' + day + '. Add a Rich Text, Image, Promotion or Custom Form widget configured to display as a popup, then add it to the Calendar Settings.');
}
event.preventDefault();
});

// locked click handler
$('.calendar .locked').attr('target', '').click(function(event) {
var config = SST.widget_config($lockedMsg.get(0));
SST.widget_popup(config, this);
event.preventDefault();
});

// close popups
$('body').on('click', '.close-popup', function(e){
e.preventDefault();
var boxy = Boxy.get(e.target);
boxy.hide();
});
});
</script>